jQuery: перейти к следующему

#jquery #css #html

#jquery #css #HTML

Вопрос:

Итак, это должно быть довольно просто … и я это делаю, но я хотел попросить несколько разных вариантов.

Одним из вариантов является использование «Плавной прокрутки» и имен привязок… но я нахожу это довольно непоследовательным.

Это моя структура HTML:

 <section id="home">
<!-- some content -->
</section>

<section id="about">
<!-- some content -->
</section>

<section id="services">
<!-- some content -->
</section>

...

У меня есть несколько «быстрых кнопок» в правой части раздела, которые в основном позволяют вам «перемещаться» вверх или вниз от раздела к разделу.

1. Я думал, что это очевидно: «но я хотел попросить несколько разных вариантов». Как я уже сказал, я использую опцию под названием «Плавная прокрутка», но она немного непоследовательна.

Ответ №1:

 jQuery.fn.extend({
  scrollTo : function(speed, easing) {
    return this.each(function() {
      var targetOffset = $(this).offset().top;
      $('html,body').animate({scrollTop: targetOffset}, speed, easing);
    });
  }
});

// Scroll to "about" section
$('#about').scrollTo('fast', 'linear');

Обновление — Для перехода от раздела к разделу используйте простой обработчик событий:

jQuery:

 $('.next-section').click(function(){
    var $this = $(this),
        $next = $this.parent().next();

    $next.scrollTo($next.offset().top, 500, 'linear');
});

$('.prev-section').click(function(){
    var $this = $(this),
        $prev = $this.parent().prev();

    $prev.scrollTo($prev.offset().top, 500, 'linear');
});

HTML:

 <section id="about">
    <a href="#" class="prev-section">Previous Section</a>
    <a href="#" class="next-section">Next Section</a>
    <div class="section-content">
        Foobar
    </div>
</section>

Вот демонстрация: http://jsfiddle.net/AlienWebguy/Xdg2k /

1. Спасибо за это… В дополнение к привязке функции прокрутки к определенной кнопке, мне также нужно иметь возможность просто прокручивать страницу вниз / вверх от «<раздел>» до «<раздел>»

2. Спасибо за обновленный код. Это работает хорошо, за исключением того факта, что это не облегчает…

3. Просто измените ‘linear’ на любое облегчение, которое вы хотите, lol. Включите пользовательский интерфейс jQuery для поддержки других типов упрощения: jsfiddle.net/AlienWebguy/Xdg2k/7

Ответ №2:

Загляните в плагин scrollTo jQuery, он должен полностью соответствовать вашим потребностям.

Ответ №3:

итак, вы хотите прокручивать страницу вверх и вниз в зависимости от того, по какой ссылке нажимает пользователь?

по моему опыту, плагин jQuery.scrollTo лучше всего подходит для этого. Простота в использовании и большая поддержка

http://flesler.blogspot.com/2007/10/jqueryscrollto.html

Ответ №4:

Вы могли бы попробовать просто установить scrolltop

 var doc = (document.contentWindow || document).document || document.ownerDocument || document,
    el = ($.browser.webkit) ? doc.body : doc.documentElement;

$(el).scrollTop($('#services').offset().top);

Ответ №5:

Мне удалось получить потрясающую плавную прокрутку, используя mootools для моего «перехода к следующему», поскольку мне не понравилась неровность jquery. Он также работает в унисон с другим jquery на странице, как только вы сделаете небольшую настройку.

http://davidwalsh.name/smooth-scroll-mootools

Сайт, на котором я его использую, в настоящее время находится в стадии разработки, но вот ссылка http://ggszabo/new/indexb.html

Щелкните раздел ленты для просмотра.