gpt4 book ai didi

jquery 在单个哈希 anchor 上平滑滚动以到达顶部

转载 作者:行者123 更新时间:2023-12-01 04:47:59 25 4
gpt4 key购买 nike

我使用这个jquery平滑滚动功能:

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

单击 anchor 链接时它可以完美运行:

<a href="#section1">smooth scroll</a>

除非单击单个哈希返回顶部,例如:

<a href="#">home</a>

在这种情况下,我看到页面顶部,但没有平滑滚动效果..

我知道,如果链接调用页面上第一个元素的 id,则一切正常,只是想知道是否有一种方法可以使用单个哈希来平滑地滚动到顶部

最佳答案

我建议在部分添加 anchor data-anchor-offset="30"并检查 anchor 。根据您的情况,将使用 defaultAnchorOffset。在这里进行一个工作演示:http://jsfiddle.net/v4tzngmr/

$('a[href*=#]').on('click',function(event){
event.preventDefault();
var defaultAnchorOffset = 0;
var $anchor = $('#' + this.hash.substring(1));
var anchorOffset = $anchor.data('anchor-offset');

if (!anchorOffset) // for when anchor doesn't have the offset attribute like Section 4
anchorOffset = defaultAnchorOffset;
var offset = $anchor.offset() === undefined ? 0 : $anchor.offset().top;
$('html,body').animate({
scrollTop: offset - anchorOffset
}, 500);
});

关于jquery 在单个哈希 anchor 上平滑滚动以到达顶部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26192272/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com