如何在Javascript中自动滚动百分比或像素？

问题描述

我有这个代码可以自动滚动到特定的 ID。 我的问题是是否有可能自动滚动到带有像素或百分比的页面的某个部分而不是 id。 感谢您的帮助。

这是我的代码

        scrollTop: jQuery("#id").offset().top
    },2000);

解决方法

根据 scrollTop 的文档，它需要一个数值。这同样适用于 animate 内的用法。

所以对于设置的像素值，直接省略获取元素偏移量的功能，直接放入值即可。百分比值也是如此，但涉及到一些数学运算。

$(document).ready(function(){
  // Add smooth scrolling to all links
  $(".pixel").on('click',function(event) {

    event.preventDefault();

      $('html,body').animate({
        scrollTop: 200 //set a numeric value to scroll a set amount of pixel
      },800,function(){
      });
  });
    $(".percent").on('click',function(event) {

    event.preventDefault();
    var windowHeight = window.innerHeight;
    var percent = 90;
    var percentPixel = windowHeight * (percent / 100); // calculate the amount of pixel off a percentage

      $('html,body').animate({
        scrollTop: percentPixel
      },function(){
      });
  });
});

body,html,.main {
  height: 100%;
}

section {
  min-height: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="pixel" href="#section2">Click Me to Smooth Scroll 200px</a>
<a class="percent" href="#section2">Click Me to Smooth Scroll 90%</a>

<div class="main">
  <section></section>
</div>

<div class="main" id="section2">
  <section style="background-color:blue"></section>
</div>

来源：https://www.w3schools.com/jquery/css_scrolltop.asp