单击其他页面上的链接后如何平滑滚动到ID

Question

假设我在页面中有一个链接，

<a href="https://example.com/#sample"><p>Click Me</a>

单击单击可转到href属性中的链接。但是由于众神的工作方式，它会立即捕捉到该页面中的id。

我要发生的是该页面不应立即转到ID，而应从页面顶部开始，然后平滑滚动至ID。

顺便提一句，粘性菜单妨碍了它，当它捕捉到ID时，就会与菜单重叠（这是我希望它滚动的主要原因之一）。

jQuery不是我的强项。

谢谢任何可以帮助的人。

编辑 我认为我的措词不正确。带有a标签的链接位于与其目标不同的页面上。例如：

主页上有链接

<a href="https://example.com/anotherPage/#sample"><p>Click Me</a>

我想滚动一个页面来工作。

抱歉，此操作不够详细。

感谢任何答复。

Answer 1

使用jQuery很简单，只有几行。

当使用时$('a[href*=\\#]')，它仅/自动应用于<a>带有哈希值（#）的所有锚点（）。

$(document).ready(function() {
    $('a[href*=\\#]').on('click', function(e){
        e.preventDefault();
        $('html, body').animate({
            scrollTop : $(this.hash).offset().top
        }, 500);
    });
});

更新资料

如果要平滑滚动到上的元素新的页面，包括下面的代码在该网页上：

$(document).ready(function() {
    if (window.location.hash) {
        var hash = window.location.hash;
        $('html, body').animate({
            scrollTop :  $(hash).offset().top
        }, 500);
    };
});

它检查URL中是否有哈希，如果存在，则将其平滑滚动到具有的元素id。

注意1：您可以通过更改500参数来更改速度。它是以毫秒为单位的动画时间。

注意2：您还可以在后面添加另一个参数500，即缓动类型。默认情况下swing（类似于CSS ease-in-out），但是您可以将其更改为linear。