JQuery Scroller Вопрос - PullRequest
       2

JQuery Scroller Вопрос

1 голос
/ 01 февраля 2011

В настоящее время я пытаюсь реализовать кнопку «вверх» и «вниз» (плавающее меню) на моем веб-сайте портфолио, чтобы прокрутить определенную сумму вниз по странице. Например, я бы нажал кнопку «вниз», и она прокрутила бы 100px вниз и наоборот.

В настоящее время я использую этот код для прокрутки до определенного якоря при нажатии кнопки, но я просто хочу изменить его, чтобы при щелчке сдвигаться вверх или вниз на определенное количество пикселей.

$(document).ready(function(){
    $('a[href*=#jump]').click(function() {
        if (location.pathname.replace(/^\//,") == this.pathname.replace(/^\//,") && location.hostname == this.hostname) {
            var $target = $(this.hash);
            $target = $target.length && $target || $('[name=' + this.hash.slice(1) +']');
            if ($target.length) {
                var targetOffset = $target.offset().top;
                $('html,body').animate({scrollTop: targetOffset}, 1000);
                return false;
            }
        }
    });
});

Текущая ссылка в html: <a class="jump" href="#jump">Back To Top</a>

, который прокручивается до якоря: <a id="jump" href="#"></a>

Я предполагаю, что кто-то сразу поймет, что я имею в виду, но спросите меня, нуждаетесь ли вы в подробностях, и я могу привести пример того, чего я пытаюсь достичь. Помощь будет оценена.

Ответы [ 2 ]

2 голосов
/ 01 февраля 2011

Вы можете использовать scrollTop () jQuery для настройки вертикальной полосы прокрутки.

Например, если ваша кнопка прокрутки вниз имеет идентификатор scrollDownButton и вы хотите прокрутить страницу вниз на 100 пикселей, то следующий код сделает это.

$('#scrollDownButton').click( function() {
    var currPosition = $('body').scrollTop();
    $('body').scrollTop(currPosition + 10);
});

scrollTop() даст вам текущую позицию вертикальной полосы прокрутки, а scrollTop(value) установит ее в заданную позицию.

Если вы хотите прокрутить страницу вверх, вычтите ее из текущего значения, а не добавьте.

Примечание: Вы хотите выбрать, какой элемент имеет полосу прокрутки. В приведенном выше примере это был <body>, но <html> также является общим элементом. Также scrollTop () был реализован в JQuery 1.2.6, чтобы убедиться, что ваша версия достаточно новая.

Обновление: как анимировать свиток.

Если вы хотите анимировать свиток и увидеть, как это происходит, а не просто прыгнуть вниз или вверх, вы можете использовать следующий код:

$('#scrollDownButton').click( function() {
    var currPosition = $('body').scrollTop();
    $('body').animate({scrollTop: currPosition+100}, 'slow');
})

Обновление для Райана

Вот код для вашей конкретной страницы.

$('document').ready( function() {
    $('#scrollDownButton').click( function() {
        var currPosition = $('html').scrollTop();
        $('html').animate({scrollTop: currPosition+100}, 'slow');
    });
});
1 голос
/ 01 февраля 2011

Один из подходов - использовать ScrollTo в jQuery и просто указать величину смещения.

jQuery ScrollTo

Например, вы могли бы всегда иметь прокрутку к одному и тому же элементу, но изменять значение смещения с шагом в 100px и т. Д.

Но я думаю, что есть намного лучший способ, чем этот ...

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...