使用变量设置具有动画功能的 ScrollTop

Posted 2023-05-07

【中文标题】使用变量设置具有动画功能的 ScrollTop

【英文标题】：Using a variable to set a ScrollTop with animate function

【发布时间】：2022-01-07 13:49:40

【问题描述】：

我有一系列折叠和打开的 div，我希望浏览器滚动到打开的 div 的顶部。

我正在尝试使用锚链接并将锚链接保存在变量“scrollClass”中，但我的代码无法正常工作。但是，当我测试控制台日志时，它会准确地输出我希望它输出的内容。我不确定这是否是一种语法情况。

如果我能在这里得到任何帮助，我将不胜感激。

提前致谢。

<script>
$('.discover-btn-open, .discover-btn-open a').click(function(e) 
e.preventDefault();
var currentElement = $(document.activeElement);
var scrollClass = $(this).closest('.discover-inner').find('#discover- anchor').attr('href');
$(".discover-inner").removeClass("discover-inner-open");
$(this).closest(".discover-inner").addClass("discover-inner-open");
console.log(scrollClass);
$('html, body').animate(scrollTop: $(scrollClass).offset().top - 100, 450);
);

$('.discover-close, .discover-close a').click(function(e) 
e.preventDefault();
$(this).closest(".discover-inner").removeClass("discover-inner-open");
);

</script>

【问题讨论】：

可能登录$(scrollClass).offset()

不确定你的意思。

【参考方案1】：

您正在将属性href 设置为scrollClass，当您尝试将其用作元素时，它将不起作用。尝试删除attr("href") 部分，然后使用.offset。

您也可以通过 jQuery 触发对要滚动到的 anchor 元素的点击。

【讨论】：

是的，谢谢，这帮助很大。立即获取滚动坐标是可行的方法。

var scrollClass = $(this).closest('.discover-inner').offset().top; $("html, body").animate(scrollTop: scrollClass -100, 450);

太棒了！很高兴你成功了