如何将HTML页面滚动到给定的锚点？
我想使浏览器滚动页面到给定的锚点，只需使用JavaScript。
我在我的HTML代码中指定了一个name或id属性：
<a name="anchorName">..</a>
要么
<h1 id="anchorName2">..</h1>
我想通过导航到http://server.com/path#anchorName获得相同的效果。 页面应该滚动，以便锚点靠近页面可见部分的顶部。
function scrollTo(hash) { location.hash = "#" + hash; }
根本不需要jQuery！
方法更简单：
var element_to_scroll_to = document.getElementById('anchorName2'); // Or: var element_to_scroll_to = document.querySelectorAll('.my-element-class')[0]; // Or: var element_to_scroll_to = $('.my-element-class')[0]; // Basically `element_to_scroll_to` just have to be a reference // to any DOM element present on the page // Then: element_to_scroll_to.scrollIntoView();
您可以使用jQuerys .animate（） ，.offset（）和scrollTop 。 喜欢
$(document.body).animate({ 'scrollTop': $('#anchorName2').offset().top }, 2000);
示例链接： http : //jsbin.com/unasi3/edit
如果你不想animation使用.scrollTop（）像
$(document.body).scrollTop($('#anchorName2').offset().top);
或JavaScript的本地location.hash像
location.hash = '#' + anchorid;
由jAndy伟大的解决scheme，但平滑滚动似乎有问题在Firefox中工作。
以这种方式编写它也适用于Firefox。
(function($) { $(document).ready(function() { $('html, body').animate({ 'scrollTop': $('#anchorName2').offset().top }, 2000); }); })(jQuery);
没有JQuery的纯JavaScript解决scheme。 在Chrome和IE上testing，未在IOS上testing
function ScrollTo(name) { ScrollToResolver(document.getElementById(name)); } function ScrollToResolver(elem) { var jump = parseInt(elem.getBoundingClientRect().top * .2); document.body.scrollTop += jump; document.documentElement.scrollTop += jump; if (!elem.lastjump || elem.lastjump > Math.abs(jump)) { elem.lastjump = Math.abs(jump); setTimeout(function() { ScrollToResolver(elem);}, "100"); } else { elem.lastjump = null; } }
演示： https ： //jsfiddle.net/jd7q25hg/12/
$(document).ready -> $("a[href^='#']").click -> $(document.body).animate scrollTop: $($(this).attr("href")).offset().top, 1000
CSS-Tricks的解决scheme不再适用于jQuery 2.2.0。 它会抛出一个select错误：
JavaScript运行时错误：语法错误，无法识别的expression式：a [href * =＃]：not（[href =＃]）
我通过更改select器来修复它。 完整的片段是这样的：
$(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 }, 1000); return false; } } }); });
大多数答案是不必要的复杂。
如果你只是想跳转到目标元素，你不需要JavaScript：
# the link: <a href="#target">Click here to jump.</a> # target element: <div id="target">Any kind of element.</div>
如果你想animation滚动到目标 ，请参考@ Shahil的答案。
我知道这是个问题，但我在css-tricks中find了一个简单易用的jQuery解决scheme。 这是我现在使用的那个。
$(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 }, 1000); return false; } } }); });
这是一个工作脚本，将页面滚动到锚点。 要设置只是给锚链接一个id匹配你想要滚动的锚点的名称属性。
<script> jQuery(document).ready(function ($){ $('a').click(function (){ var id = $(this).attr('id'); console.log(id); if ( id == 'cet' || id == 'protein' ) { $('html, body').animate({ scrollTop: $('[name="' + id + '"]').offset().top}, 'slow'); } }); }); </script>
