我想让浏览器通过使用JavaScript将页面滚动到给定的锚点。

我已经在HTML代码中指定了一个名称或id属性:

 <a name="anchorName">..</a>

or

 <h1 id="anchorName2">..</h1>

我希望获得与您通过导航到http://server.com/path#anchorName所获得的相同效果。应该滚动页面,使锚点靠近页面可见部分的顶部。


当前回答

要让浏览器滚动页面到给定的锚点,最简单的方法是在style.css文件中添加*{scroll-behavior: smooth;},在HTML导航中使用# nameofsection。

* {scroll-behavior:光滑;} <a href="# Scroll -to">点击滚动<a/> < p > < / p >其他部分 < p > < / p >其他部分 < p > < / p >其他部分 < p > < / p >其他部分 < p > < / p >其他部分 < p > < / p >其他部分 < p > < / p >其他部分 < p > < / p >其他部分 < p > < / p >其他部分 < p > < / p >其他部分 < p > < / p >其他部分 < p > < / p >其他部分 < p > < / p >其他部分 <节id = "滚动到" > <p>它将向下滚动到这个部分</p> < / >节

其他回答

$(document).ready ->
  $("a[href^='#']").click ->
    $(document.body).animate
      scrollTop: $($(this).attr("href")).offset().top, 1000

简单的方式:

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();

这是一个将页面滚动到锚点的工作脚本。 要设置它,只需给锚链接一个与要滚动到的锚的name属性匹配的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>
function scrollTo(hash) {
    location.hash = "#" + hash;
}

根本不需要jQuery !

大多数答案都不必要地复杂。

如果你只想跳转到目标元素,你不需要JavaScript:

# the link:
<a href="#target">Click here to jump.</a>

# target element:
<div id="target">Any kind of element.</div>

如果你想动画地滚动到目标,请参考5hahiL的答案。