JQuery: перейти к следующему <section>

Question

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

Один из вариантов - использовать "Плавную прокрутку" и имена якорей ..... но я нахожу, что это довольно противоречиво.

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

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

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

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

...

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

Answer 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/

Answer 2

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

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

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

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

Answer 3

Вы можете попробовать просто установить прокрутку

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

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

Answer 4

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

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

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

Answer 5

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