jQuery Scroller Вопрос

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

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

$(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>

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

источник

2011-02-01 Ryan

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

Cheers. Big ups Anton: D – Ryan

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

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

$('#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'); 
    }); 
});

источник

2011-02-01 20:32:58 Anton

Хорошо, спасибо, я попробую это и ответ позже, если это сработает. Я предполагаю, что он будет работать таким же образом, чтобы подняться на 10 пикселей? – Ryan

Чтобы подняться, вы хотите вычесть 10 из текущего значения. Вам не нужно беспокоиться о том, чтобы идти ниже нуля, поскольку jquery достаточно умен, чтобы не волновать. – Anton

Спасибо Антон. Очень быстрый ответ! В первый раз, используя StackOverflow, очень хорошее сообщество здесь. – Ryan

Одним из подходов может быть использование прокрутки JQuery's ScrollTo и просто указание суммы смещения.

jQuery ScrollTo

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

Но я предполагаю, что это гораздо лучше, чем это там ...

источник

2011-02-01 20:22:12 jCuga

Вот пример веб-сайта с тем, что я пытаюсь достичь http://www.gregponchak.com/ – Ryan

jQuery Scroller Вопрос

ответ

Смежные вопросы