使用 JS 创建漂亮的滚动/滑动效果

Create a nice scrolling/sliding effect with JS

本文关键字：滚动 JS 创建 漂亮 使用      更新时间：2023-09-26

我想创建一个"平滑"的滚动动画，从一个元素向下滑动到下一个元素。我不想使用Jquery或任何库，只想使用javascript和HTML。我试过：

element.scrollIntoView();

这会导致滚动，但不会产生平滑的动画。我已经看过其他一些平滑滚动技术，但它们使用 Jquery。我还想补充一点，滚动应该是从一个页面上的元素到页面上的另一个元素。仅向下滚动。也只有像function scrollFromHere(from, to)这样的JavaScript函数。

我知道这是一个

古老的答案，但对于任何在"现代"寻找解决方案的人来说，scrollIntoView都支持behavior参数：

element.scrollIntoView({ 
  behavior: 'smooth' 
});

支持behavior: "smooth"是Chrome 61，Edge 79，Firefox 36，Safari 15.4。因此，Safari 是唯一真正的支持问题，假设您想要支持的不仅仅是 Safari 的最新专业(截至 2022 年(。

没关系，我想我找到了问题的答案。它花费了很多搜索，但这里是：

<div id="elem1"><button onclick="scrollToward('elem2', 'elem1');">Scroll Down</button></div>
<div id="elem2"></div>
<script>
//Here is my script:
function animate(elem,style,unit,from,to,time,prop) {
    if( !elem) return;
    var start = new Date().getTime(),
        timer = setInterval(function() {
            var step = Math.min(1,(new Date().getTime()-start)/time);
            if (prop) {
                elem[style] = (from+step*(to-from))+unit;
            } else {
                elem.style[style] = (from+step*(to-from))+unit;
            }
            if( step == 1) clearInterval(timer);
        },25);
    elem.style[style] = from+unit;
}
    function scrollToward(ele, from) {
    var target = document.getElementById(ele);
    from = document.getElementById(from).offsetTop;
    animate(document.body, "scrollTop", "", from, target.offsetTop, 1500, true);
}
</script>

经过测试，并在您以创建滚动条的方式设置div 样式时工作。在这里找到答案。

 !doctype html>
 <head>
 <style>
/* Prevents slides from flashing */
#slides {
  display:none;
}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="jquery.slides.min.js"></script>
<script>
$(function(){
  $("#slides").slidesjs({
    width: 940,
    height: 528
  });
});
</script>
</head>
<body>
<div id="slides">
<img src="">
 </div>
</body>
相关文章：