jQuery：跳转到下一个< section> [英] jQuery: jump to next <section>

问题描述

所以这应该是相当基本的...我正在这样做，但我想要一些不同的选择。

一个选择是使用Smooth Scroll和锚名...但我发现这是不一致的。

这是我的HTML结构：

 < section id =home> 
<！ -  some content  - > 
< / section> 
 
< section id =about> 
<！ -  some content  - > 
< / section> 
 
< section id =services> 
<！ -  some content  - > 
< / section> 
 
 ... 
  

我在右侧有一些快速按钮

解决方案

  jQuery.fn.extend（{
 scrollTo：function（speed，easing）{
 return this.each（function（）{
 var targetOffset = $（this）.offset （）.top; 
 $（'html，body'）。animate（{scrollTop：targetOffset}，speed，easing）; 
}）; 
} 
} 
 
 //滚动到about节
 $（'＃about'）。scrollTo（'fast'，'linear'） 
 

更新 - 要从节跳转到使用简单的事件处理程序： / em>

<$ p $（'。next-section'）。click（function（）{
var $ this = $（this），
$ next = $ this.parent ）;

$ 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>上一节< / a> 
< a href =＃class =next-section>下一节< / a> 
< div class =section-content> 
 Foobar 
< / div> 
< / section> 
  

这里是一个演示： http://jsfiddle.net/AlienWebguy/Xdg2k/

So this should be fairly basic... and I'm doing it, but I wanted to ask for a few different options.

One option is using the "Smooth Scroll" and anchor names... but I find that to be quite inconsistent.

This is my HTML structure:

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

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

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

...

I have some "quick buttons" on the right side of the section and basically allows you to "travel" up or down from section to section.

解决方案

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');

Update - To jump from section to section use a simple event handler:

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>

Here's a demo: http://jsfiddle.net/AlienWebguy/Xdg2k/

这篇关于jQuery：跳转到下一个&lt; section&gt;的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！