1

Заголовок плохо отражает суть вопроса. У меня на странице поставлено множество якорей <a name="c1...с50"></a> и переход происходит по ссылке с хэшем #c1. Так вот, необходимо чтобы видимая область окна прокручивалась не к самому якорю, а на позицию на 50 пикселей выше якоря.

UPD Решил так:

$(document).ready(function() {
    // Прокрутка к закладке
    if(window.location.hash) {
        setTimeout(function(){
            var scrollTop = $(window).scrollTop()-50;
            $('html, body').animate({scrollTop: scrollTop}, 'fast');
        }, 50);
    }
})

То есть, просто ждем 50 миллисекунд после загрузки и откручиваем окно на 50 пикселей наверх...

2
  • Вот тоже ищу, но никак не могу найти, прошу автора, если найдет отписаться) Я тоже отпишусь тут, если найду решение)
    – user11543
    Commented 28 февр. 2013 в 18:05
  • Свое решение я добавил в вопрос. Commented 28 февр. 2013 в 19:22

1 ответ 1

1

Можно использовать вот этот вариант:

function scrollToElement(selector, time, verticalOffset) {
    time = typeof(time) != 'undefined' ? time : 1000;
    verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0;
    element = $(selector);
    offset = element.offset();
    offsetTop = offset.top + verticalOffset;
    $('html, body').animate({
        scrollTop: offsetTop
    }, time);
}

Однако придётся вешать обработчик на каждую ссылку, примерно такого вида:

$('a.jump-to-content').click(function () {
    scrollToElement('#c1',500, -50); // #c1 - наш элемент, 500 - время анимации,       -50 это 50px до нашего элемента
});

Взято из этой статьи.

1
  • В моем случае навигация не внутри одного документа, а между разными страницами. Так что, мне подходит по document.ready Commented 28 февр. 2013 в 19:35

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.