Как прокрутить на заданное расстояние выше / ниже элемента с помощью JQuery?

Question

Как прокрутить на заданное расстояние выше / ниже элемента с помощью JQuery?

0

У меня есть ссылка, показанная ниже, которая при нажатии на нее прокручивает пользователя до элемента #contactHeader. То, что я хочу сделать, это прокрутить до 200px ВЫШЕУКАЧАТЬ #contactHeader, а не напрямую к нему. Есть ли способ добавить правило, которое реализует проверку -200px, чтобы она прокручивалась до 200 пикселей над элементом?

<li><a id="scrollToContact" href="#">&bull;</a></li>

$("#scrollToContact").click(function() {
            $('html, body').animate({
            scrollTop: $("#contactHeader").offset().top
        }, 1000);
    });

OllyBarca 25 окт. 2013, в 13:11

Источник

0

Не будет ли это простым scrollTop: $("#contactHeader").offset().top - 200 ?
Latheesan 25 окт. 2013, в 11:11
0

@OllyRulesOk не забудьте принять ответ.
Rory McCrossan 25 окт. 2013, в 13:06

Теги:

jquery

scroll

3 ответа

1

Просто добавьте - 200 к концу строки scrollTop.

$("#scrollToContact").click(function() {
    $('html, body').animate({
        scrollTop: $("#contactHeader").offset().top - 200
        // Here -----------------------------------^^^^^^
    }, 1000);
});

Или, если заголовок может находиться в пределах 200 пикселей вверху страницы, вам может понадобиться бросить Math.max:

$("#scrollToContact").click(function() {
    $('html, body').animate({
        scrollTop: Math.max(0, $("#contactHeader").offset().top - 200)
    }, 1000);
});

T.J. Crowder 25 окт. 2013, в 09:26

1

scrollTop: $("#contactHeader").offset().top -200

Garlov 25 окт. 2013, в 09:18

1

.offset().top - это уже число.
T.J. Crowder 25 окт. 2013, в 11:13
0

Тогда просто пропустите parseInt, не помните, нужно ли это или нет. Береженого Бог бережет :)
Garlov 25 окт. 2013, в 11:14

Ещё вопросы

Не будет ли это простым scrollTop: $("#contactHeader").offset().top - 200 ?
@OllyRulesOk не забудьте принять ответ.
Тогда просто пропустите parseInt, не помните, нужно ли это или нет. Береженого Бог бережет :)

Rory McCrossan · Accepted Answer · 2013-10-25T09-14-00.000Z

Свойство offset().top возвращает вам целое число, поэтому вы можете просто вычесть его, чтобы перейти к более высокой позиции на странице:

$("#scrollToContact").click(function() {
    $('html, body').animate({
        scrollTop: $("#contactHeader").offset().top - 200
    }, 1000);
});