js实现滚动条动画

最新推荐文章于 2024-07-30 11:44:55 发布

TingBlog

最新推荐文章于 2024-07-30 11:44:55 发布

阅读量2.7k

点赞数

分类专栏： javascript 文章标签： javascript DOM节点 ScrollTop

本文链接：https://blog.csdn.net/liting1996/article/details/81530055

版权

javascript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

纯练习，本来想尝试用原生js写第二个动画效果，但是目前没有什么思路，后面想到了会更新的，怪我是个渣渣一枚

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style type="text/css">
    #myTop{
        height: 900px;
        background-color: cyan;
    }
    #myTwo{
        height: 900px;
        background-color: yellow;
        position: relative;
        font-size: 35px;
    }
    #bottom{
        position: absolute;
        display: block;
        left: 0;
        bottom: 0;
    }
    #nav{
        position: fixed;
        width: 100px;
        height: 200px;
        top:50%;

    }
    #nav .dot{
        border-radius: 50%; 
        width: 16px;
        height: 16px;
        margin: 20%;
        opacity: 4px;
        box-shadow: 0 0 4px #fff inset;
        position: relative;
        cursor: pointer;
    }
    #main div{
        height: 1000px;
        margin: 15px;
        background-color: green;
        font-size: 35px; 
    }
</style>
<body>
    <button id="onScroll">scrollIntoView(true) </button>
    <button id="onScroll2">scrollIntoView(false) </button>
    <div id="myTop"><h1>这是我的第一个页面</h1></div>
    <div id="myTwo">
        元素上边框与视窗顶部齐平 
        <span id="bottom">元素下边框与视窗底部齐平</span>
    </div>
    <div>
    <h1>案例二</h2>
    <div id='nav'>
        <div class='dot' title="1"></div>
        <div class='dot' title='2'></div>
        <div class='dot' title='3'></div>
        <div class='dot' title='4'></div>
        <div class='dot' title='5'></div>
    </div>
    <div id="main">
        <div id="f1" data-section-title='1'>页面1</div>
        <div id="f2" data-section-title='2'>页面2</div>
        <div id="f3" data-section-title='3'>页面3</div>
        <div id="f4" data-section-title='4'>页面4</div>
        <div id="f5" data-section-title='5'>页面5</div>
    </div>
    </div>
<script type="text/javascript">
    window.onload = function() {
        document.getElementById('onScroll').onclick = function() {
            document.getElementById('myTwo').scrollIntoView(true);
        }
        document.getElementById('onScroll2').onclick = function() {
            document.getElementById('myTwo').scrollIntoView(false);
        }
    }
</script>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript">;

(function(){

   var divMain = document.getElementById('main').querySelectorAll('div');
   var divnav = document.getElementById('nav').querySelectorAll('div');
   window.onscorll = function(){
    var wst = document.documentElement.scrollTop;
    var fID;
    for(var i = 0; i < 5; i++) {
       //判断滚动条的位置
       if(divMain[i].offsetTop <= wst + 10);{
         divnav[i].style.backgroundColor = 'white';
       }

    }
  }
  for(var i = 0; i < 5; i++) {
     divnav[i].onclick = function() {
        for(var j = 0; j < 5; j++) {
            if(this.title == divMain[j].dataset.sectionTitle){
               $('html,body').animate({scrollTop: divMain[j].offsetTop}, 500);
            }
        }
     }
  }
})()
</script>
</body>

</html>