时间戳

首页 > 解决方案 > 单击某个 css 类或 ID 时使用户的视口向上滚动

javascript - 单击某个 css 类或 ID 时使用户的视口向上滚动

问题描述

（作为参考，我正在为 Wordpress 使用 DIVI，尝试使用代码块来完成此操作）

我有一个带有 7 个步骤的滑块/轮播，所有步骤都有“下一个”和“上一个”按钮供用户使用。当用户点击下一步进入第 2 步时，由于第 1 步窗口大于第 2 步，这意味着他们的窗口现在位于第 2 步下方（“下一个”和“上一个”按钮位于每个滑块的底部）。

按钮当前使用 # 链接来打开下一个运行良好的滑块，但我需要一个函数来实现它，因此当单击其中一个链接（都具有类“.rv-welcome-stagebutton”）时，它会移动窗口回到旋转木马的顶部。

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

我尝试使用页面上的当前代码，但没有运气。

TLDR：我想要实现的目标 -

[页面动图：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>

标签： javascripthtmljquerycsswordpress

解决方案

编辑：我在上次回复中犯了一些错误，我现在修复它，试试看。

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

首先，我们要看看页面顶部和部分顶部之间的距离（#rv-welcomeslider-container）。

我们可以使用 jQuery 来执行此操作offset().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');

});

让我知道它是否有效:)

推荐阅读