平滑滚动到div id jQuery

我一直在试图让滚动div ID的jQuery代码正常工作。 基于另一个堆栈溢出问题,我尝试了以下

DEMO http://jsfiddle.net/kevinPHPkevin/8tLdq/

$('#myButton').click(function() { $.scrollTo($('#myDiv'), 1000); }); 

但它没有工作。 它只是捕捉到div。 我也试过了

 $('#myButton').click(function(event) { event.preventDefault(); $.scrollTo($('#myDiv'), 1000); }); 

没有进展。

你需要animationhtml, body

DEMO http://jsfiddle.net/kevinPHPkevin/8tLdq/1/

 $("#button").click(function() { $('html, body').animate({ scrollTop: $("#myDiv").offset().top }, 2000); }); 

如果您想在页面上覆盖标准的href-id导航而不更改平滑滚动的 HTML标记,请使用以下示例 :

 // handle links with @href started with '#' only $(document).on('click', 'a[href^="#"]', function(e) { // target element id var id = $(this).attr('href'); // target element var $id = $(id); if ($id.length === 0) { return; } // prevent standard hash navigation (avoid blinking in IE) e.preventDefault(); // top position relative to the document var pos = $id.offset().top; // animated top scrolling $('body, html').animate({scrollTop: pos}); }); 

这是我的2美分:

使用Javascript:

 $('.scroll').click(function() { $('body').animate({ scrollTop: eval($('#' + $(this).attr('target')).offset().top - 70) }, 1000); }); 

HTML:

 <a class="scroll" target="contact">Contact</a> 

和目标:

 <h2 id="contact">Contact</h2> 

以下是我使用的:

 <!-- jquery smooth scroll to id's --> <script> $(function() { $('a[href*=#]:not([href=#])').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) { $('html,body').animate({ scrollTop: target.offset().top }, 500); return false; } } }); }); </script> 

与这一个美是你可以使用无限数量的散列链接和相应的ID,而无需执行每个新的脚本。

如果您使用的是WordPress,请将代码插入主题的footer.php文件中,并放在closures主体标记</body>

如果您无法访问主题文件,则可以将该代码embedded到post/页面编辑器中(您必须以文本模式编辑post),也可以在将在所有页面上加载的文本小部件中embedded代码。

如果您使用任何其他CMS或HTML,则可以将代码插入到正文标记</body>之前的所有页面中加载的代码段中。

如果你需要更多的细节,请查看我的快速文章: jQuery平滑滚动到id

希望有所帮助,如果您对此有任何疑问,请告诉我。

你确定你正在加载jQuery的scrollTo插件文件?

你可能会得到一个对象:在控制台找不到“scrollTo”错误。

scrollTO方法不是原生的jquery方法。 要使用它,你需要包括jquery滚动到插件文件。

ref: http : //flesler.blogspot.in/2009/05/jqueryscrollto-142-released.html http://flesler.blogspot.in/2007/10/jqueryscrollto.html

soln:在头部添加这个。

 <script src="\\path\to\the\jquery.scrollTo.js file"></script> 

更多的例子:

HTML链接:

 <a href="#featured" class="scrollTo">Learn More</a> 

JS:

  $(".scrollTo").on('click', function(e) { e.preventDefault(); var target = $(this).attr('href'); $('html, body').animate({ scrollTop: ($(target).offset().top) }, 2000); }); 

HTML锚点:

  <div id="featured">My content here</div> 

这个脚本是对Vector脚本的改进。 我做了一些改变。 所以这个脚本适用于每个类页面的链接 – 滚动它。

起初没有放松:

 $("a.page-scroll").click(function() { var targetDiv = $(this).attr('href'); $('html, body').animate({ scrollTop: $(targetDiv).offset().top }, 1000); }); 

为了缓解你将需要JQuery UI:

 <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 

将此添加到脚本中:

 'easeOutExpo' 

最后

 $("a.page-scroll").click(function() { var targetDiv = $(this).attr('href'); $('html, body').animate({ scrollTop: $(targetDiv).offset().top }, 1000, 'easeOutExpo'); }); 

所有的缓解你可以在这里find: 备忘单 。

你可以通过使用以下简单的jQuery代码来完成。

教程,演示和源代码可以在这里find – 顺利滚动到div使用jQuery

JavaScript的:

 $(function() { $('a[href*=#]:not([href=#])').click(function() { var target = $(this.hash); target = target.length ? target : $('[name=' + this.hash.substr(1) +']'); if (target.length) { $('html,body').animate({ scrollTop: target.offset().top }, 1000); return false; } }); }); 

HTML:

 <a href="#section1">Go Section 1</a> <div id="section1"> <!-- Content goes here --> </div>