如何将HTML页面滚动到给定的锚点?

我想使浏览器滚动页面到给定的锚点,只需使用JavaScript。

我在我的HTML代码中指定了一个nameid属性:

  <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>