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

Question

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

我正在尝试使用锚点 links 并将锚点 link 保存在变量“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>

Answer 1

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

您也可以点击要滚动到 jQuery 的 anchor 元素。

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

Using a variable to set a ScrollTop with animate function

javascript

variables

scrolltop