jQuery：跳到下一个

所以这应该是相当基础的…我正在做，但我想要几个不同的选择。

一种选择是使用“平滑滚动”和锚名称……但我发现它非常不一致。

这是我的HTML结构：

  
 
  
 
  
 ... 

我在该部分的右侧有一些“快速按钮”，基本上允许您从一个部分向上或向下“移动”。

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：

 
 Previous Section Next Section 
 Foobar 
  

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

Answer 2

查看scrollTo jQuery插件，它应该完全满足您的需求。

Answer 3

所以你想要根据用户点击的链接向上和向下滚动页面？

根据我的经验，jQuery.ScrollTo插件是最好的。 易于使用和大量支持

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

Answer 4

您可以尝试设置scrolltop

 var doc = (document.contentWindow || document).document || document.ownerDocument || document, el = ($.browser.webkit) ? doc.body : doc.documentElement; $(el).scrollTop($('#services').offset().top); 

Answer 5

我设法得到了一个非常流畅的滚动使用mootools我的’跳到下一个’不喜欢jquery的锯齿状。 一旦你做了一些调整，它也可以与页面上的其他jquery协同工作。

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

我使用它的网站目前正在建设中，但这里是链接http：//ggszabo/new/indexb.html

单击要查看的部分色带。