不使用＃滚动到id href

Question

您好我正在开发一个网站，我想让人们滚动到一个href id而不在浏览器的导航栏中显示它。如果有可能我想用

做

我能做到吗？感谢

示例：index.html #id

我想要的方式：index.html

Answer 1

您可以使用Element.scrollIntoView来实现此目的。需要的JavaScript是

var scrollToElement = function(id){
    document.getElementById(id).scrollIntoView();
}

如果您将{behaviour: 'smooth'}传递给该功能，您将获得平滑滚动，这非常光滑。

检查https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView以获取有关此功能的更多文档

Answer 2

纯JS版

使用window.scrollTo(x,y)可以移动视口：

var elem = document.getElementById("your element id");
window.scrollTo(0, elem.offsetTop);

jQuery版本

如果您已经在使用jQuery，则可以使用.animate()来平滑地滚动到元素。

以下是一个例子：

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

See also here