gpt4 book ai didi

jquery - 如果页面高度动态变化,带 id 的链接不起作用

转载 作者:行者123 更新时间:2023-11-28 17:29:11 25 4
gpt4 key购买 nike

我正在处理的结构是这样的:

<html>
<header>
<a href="#footer">scroll to footer</a>
</header>
<section id="gallery"></section>
<footer id="footer"></footer>
</html>

显然,我希望在单击链接时滚动到 #footer,但问题是 #gallery 是在页面加载后加载的,并且整个页面的变化。链接仅滚动到加载 #gallery 之前 #footer 所在的位置。

我正在使用的图库示例:http://tympanus.net/Development/GammaGallery/

我用来实现平滑滚动的 jQuery 代码:

$(document).ready(function() {
function filterPath(string) {
return string
.replace(/^\//,'')
.replace(/(index|default).[a-zA-Z]{3,4}$/,'')
.replace(/\/$/,'');
}
$('a[href*=#]').each(function() {
if ( filterPath(location.pathname) == filterPath(this.pathname)
&& location.hostname == this.hostname
&& this.hash.replace(/#/,'') ) {
var $targetId = $(this.hash), $targetAnchor = $('[name=' + this.hash.slice(1) +']');
var $target = $targetId.length ? $targetId : $targetAnchor.length ? $targetAnchor : false;
if ($target) {
var targetOffset = $target.offset().top;
$(this).click(function() {
$('html, body').animate({scrollTop: targetOffset}, 600);
return false;
});
}
}
});
});

最佳答案

在调用事件处理函数时获取 .offset(),只需将 targetOffset 赋值放在函数中即可:

$(this).click(function() {
var targetOffset = $target.offset().top;
$('html, body').animate({scrollTop: targetOffset}, 600);
return false;
});

关于jquery - 如果页面高度动态变化,带 id 的链接不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26503034/

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