让用户的视口在单击某个 css 类或 ID 时向上滚动

Question

(作为参考，我在Wordpress中使用DIVI，试图用代码块来实现这一点(

我有一个带有7个台阶的滑块/转盘；下一个"；以及"；先前的"；供用户浏览的按钮。当用户点击下一个步骤2时，因为步骤1窗口大于步骤2，这意味着他们的窗口现在位于步骤2下方("下一个"one_answers"上一个"按钮位于每个滑块的底部(。

按钮目前使用#链接来打开下一个滑块，效果很好，但我需要一个功能，这样当点击其中一个链接(所有链接都有".rv welcome stagebutton"类(时，它会将窗口移回转盘的顶部。

因此，用户不必不断地滚动回每个阶段的顶部。

我试过使用页面上的当前代码，但没有成功。

TLDR：我正在努力实现的目标-

• 用户单击带有css类的链接"。rv欢迎stagebutton
• 将窗口向上滚动到ID为"0"的部分的顶部#rv welcomeslider容器">

[运行页面的GIF：https://i.imgur.com/fQiFjnK.gif]

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">                              
jQuery(document).ready(function(){
$('.rv-welcome-stagebutton').click(function(){
window.scroll({
top: 0, 
left: 0, 
behavior: 'smooth'
});}   }                   
</script>

Answer 1

EDIT：我在上一次响应中犯了一些错误，我现在修复了它，试试看。

我想我可以帮你解决这个问题。您已经使用了jQuery，所以这很好。

首先，我们要看看页面顶部和部分顶部之间的距离(#rv-welcomeslider容器(。

我们可以使用jQueryoffset().top来实现这一点，它将返回您的部分离文档顶部有多远。

因此，我们写：let getSectionCoords = $("#rv-welcomeslider-container").offset().top;

现在，我们所要做的就是向每个按钮添加一个click事件(.rv welcome stagebutton(，并使其向右滚动到旋转木马部分的顶部(现在是getSectionCoords(。

所以，这里是最后的代码：

let getSectionCoords = $("#rv-welcomeslider-container").offset().top;
$('.rv-welcome-stagebutton').on('click',function() {
$('body').animate({scrollTop : getHeadingThree}, '500');
});

如果有效，请告诉我：(