平滑滚动到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>
