jquery 使用JavaScript平滑自动滚动

biswetbf  于 2023-10-17  发布在  jQuery
关注(0)|答案(9)|浏览(131)

我试图在我的网页上实现一些代码加载页面后自动滚动。我使用了JavaScript函数来执行自动滚动,当页面加载时我调用了我的函数,但页面仍然不能平滑滚动!有没有什么方法可以让我的页面自动平滑地滚动?
下面是我的JavaScript函数:

function pageScroll() {
        window.scrollBy(0,50); // horizontal and vertical scroll increments
        scrolldelay = setTimeout('pageScroll()',100); // scrolls every 100 milliseconds
}
qc6wkl3g

qc6wkl3g1#

它并不平滑,因为滚动每100毫秒增加50。
改变这一点,你滚动的数量,以一个较小的数字,有功能运行的错觉,更'顺利'。
把速度调低,使它更快或更慢。

function pageScroll() {
    window.scrollBy(0,1);
    scrolldelay = setTimeout(pageScroll,10);
}

会显得更流畅,试试吧;)

bksxznpy

bksxznpy2#

试着使用jQuery,这段代码:

$(document).ready(function(){
     $('body,html').animate({scrollTop: 156}, 800); 
});

156位滚动到(px),从页面顶部。
800 -滚动持续时间(ms)

gupuwyp2

gupuwyp23#

您可能希望查看jQuery ScrollTo插件的源代码,它可以平滑地滚动。或者甚至可以使用插件而不是滚动自己的函数。

wfypjpf4

wfypjpf44#

流畅运行的动画取决于客户端的机器。无论您的代码编写得多么合理,您都不会对动画在128 MB RAM系统上运行的方式感到满意。
以下是如何使用jQuery滚动:

$(document).scrollTop("50");

你也可以试试AutoScroll Plugin

s6fujrry

s6fujrry5#

你可以使用jfunc函数来实现。使用jFunc_ScrollPageDownjFunc_ScrollPageUp函数。http://jfunc.com/jFunc-Functions.aspx

nnvyjq4y

nnvyjq4y6#

既然你已经把这个问题标记为“jquery”,为什么不试试.animate()呢?这个特殊的jquery函数旨在平滑地动画化所有类型的属性,包括数字CSS属性以及滚动位置。

iklwldmw

iklwldmw7#

数字是硬编码的,但想法是一项一项地移动(标题是52px),当向下时,返回

let elem = document.querySelector(".spfxBirthdaysSpSearch_c7d8290b ");
let lastScrollValue = 0
let double_lastScrollValue = 0
let scrollOptions = { top: 79, left: 0, behavior: 'smooth' }
let l = console.log.bind(console)

let intScroll = window.setInterval(function() {
    double_lastScrollValue = lastScrollValue //last
    lastScrollValue = elem.scrollTop // after a scroll, this is current
    if (double_lastScrollValue > 0 && double_lastScrollValue == lastScrollValue){
        elem.scrollBy({ top: elem.scrollHeight * -1, left: 0, behavior: 'smooth' });
    } else {
        if (elem.scrollTop == 0){
            elem.scrollBy({ top: 52, left: 0, behavior: 'smooth' });
        } else {
            elem.scrollBy(scrollOptions);
        }
    }
}, 1000);
pcrecxhr

pcrecxhr8#

这里有另一个例子,使用requestAnimationFrame。它可以让您控制滚动时间,并支持缓动功能。它非常强大,但公平的警告:用户无法中断滚动。

// Easing function takes an number in range [0...1]
// and returns an eased number in that same range.
// See https://easings.net/ for more.
function easeInOutSine(x) { return -(Math.cos(Math.PI * x) - 1) / 2; }

// Simply scrolls the element from the top to the bottom.
// `elem` is the element to scroll
// `time` is the time in milliseconds to take.
// `easing` is an optional easing function.
function scrollToBottom(elem, time, easing)
{
  var startTime = null;
  var startScroll = elem.scrollTop;
  // You can change the following to scroll to a different position.
  var targetScroll = elem.scrollHeight - elem.clientHeight;
  var scrollDist = targetScroll - startScroll;
  
  easing = easing || (x => x);
  function scrollFunc(t)
  {
    if (startTime === null) startTime = t;
    
    var frac = (t - startTime) / time;
    if (frac > 1) frac = 1;
    
    elem.scrollTop = startScroll + Math.ceil(scrollDist * easing(frac));
    
    if (frac < 0.99999)
      requestAnimationFrame(scrollFunc);
  }
  requestAnimationFrame(scrollFunc);
}

// Do the scroll
scrollToBottom(document.getElementById("data"), 10000, easeInOutSine);
gz5pxeao

gz5pxeao9#

使用此选项滚动SmoothToBottom

$(document).ready(function(){
  const scrollingElement = (document.scrollingElement || document.body);

  const scrollSmoothToBottom = () => {
  $(scrollingElement).animate({
  scrollTop: document.body.scrollHeight,
  }, 500);
 }
 scrollSmoothToBottom();
})

相关问题