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

Question

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

这是我的代码

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

Answer 1

根据 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
      }, 800, 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

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

How to autoscroll with percentage or pixels in Javascript?

javascript

scroll

scrollbar

uiscrollview