点击平滑滚动效果

最新推荐文章于 2022-04-04 17:01:43 发布

weixin_46341003

最新推荐文章于 2022-04-04 17:01:43 发布

阅读量97

点赞数

原文链接：https://blog.csdn.net/qq_45100709/article/details/112112720?utm_medium=distribute.pc_category.none-task-blog-hot-3.nonecase&depth_1-utm_source=distribute.pc_category.none-task-blog-hot-3.nonecase

版权

 <div>
        <button>点击跳转</button>
        <div>

            <span>我是开始位置</span>
            <span>2</span>
            <span>3</span>
            <span>4</span>
            <span>5</span>
            <span>6</span>
            <span>7</span>
            <span>8</span>
            <span>9</span>

        </div>
    </div>```
    只是留给实现功能的笔记 样式不管了
 

```javascript

给个高度

 span {
            width: 70px;
            height: 100px;
            display: block;
            border: 1px saddlebrown solid;
        }

        div {
            width: 200px;

            margin: auto;
            text-align: center;
        }

复制几份变得更高

   <button>点击跳转</button>
        <div>

            <span>我是开始位置</span>
            <span>2</span>
            <span>3</span>
            <span>4</span>
            <span>5</span>
            <span>6</span>
            <span>7</span>
            <span>8</span>
            <span>2</span>
            <span>3</span>
            <span>4</span>
            <span>5</span>
            <span>6</span>
            <span>7</span>
            <span>8</span>
            <span>9</span>
            <span>2</span>
            <span>3</span>
            <span>4</span>
            <span>5</span>
            <span>6</span>
            <span>7</span>
            <span>8</span>
            <span>9</span>
            <span>2</span>
            <span>3</span>
            <span>4</span>
            <span>5</span>
            <span>6</span>
            <span>7</span>
            <span>8</span>
            <span>9</span>
            <span>2</span>
            <span>3</span>
            
            <span>5</span>
            <span>6</span>
            <span>7</span>
            <span>8</span>
            <span>9</span>
            <span>2</span>
            <span>3</span>
            <span>4</span>
            <span>5</span>
            <span>6</span>
            <span>7</span>
            <span>8</span>
            <span>9</span>

            <span>9</span>

        </div>

然后写效果

   let start = document.querySelectorAll("span")
    //获取按钮
    let button1 = document.querySelectorAll("button")[0]


    // 点击事件函数
    button1.onclick = function () {

        //高度*长度 
        var dis = start[0].offsetHeight * Number(start.length)

        // 设置一个初始值
        let a = 20
        aa(a, dis)
        function aa(x1, y1) {
            let distance = y1 - x1  // 全部长度减掉初始值
            let xx = x1   //赋值


            setTimeout(() => {//定时器
                const dist = Math.ceil(distance / 10)  //常量
                //加
                xx += dist
                console.log(xx)
                window.scrollTo(xx, x1)
                // 在调用
                // xx等于初始值+ distance/10 因为每次循环xx都会变大增加，每次循环都会y1减x1 所有distance会变小 所以xx最大只能达到和y1一样大
                aa(xx, y1)

            }, 100)//设置动画时间



        }




    }

效果不传了就这样了
如果有需要可以加个判断条件清除定时器

全部代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        span {
            width: 70px;
            height: 100px;
            display: block;
            border: 1px saddlebrown solid;
        }

        div {
            width: 200px;

            margin: auto;
            text-align: center;
        }
    </style>
</head>

<body>

    <div>
        <button>点击跳转</button>
        <div>

            <span>我是开始位置</span>
            <span>2</span>
            <span>3</span>
            <span>4</span>
            <span>5</span>
            <span>6</span>
            <span>7</span>
            <span>8</span>
            <span>2</span>
            <span>3</span>
            <span>4</span>
            <span>5</span>
            <span>6</span>
            <span>7</span>
            <span>8</span>
            <span>9</span>
            <span>2</span>
            <span>3</span>
            <span>4</span>
            <span>5</span>
            <span>6</span>
            <span>7</span>
            <span>8</span>
            <span>9</span>
            <span>2</span>
            <span>3</span>
            <span>4</span>
            <span>5</span>
            <span>6</span>
            <span>7</span>
            <span>8</span>
            <span>9</span>
            <span>2</span>
            <span>3</span>

            <span>5</span>
            <span>6</span>
            <span>7</span>
            <span>8</span>
            <span>9</span>
            <span>2</span>
            <span>3</span>
            <span>4</span>
            <span>5</span>
            <span>6</span>
            <span>7</span>
            <span>8</span>
            <span>9</span>

            <span>9</span>

        </div>
    </div>

</body>
<script>



    // 获取第一个span 开始位置
    let start = document.querySelectorAll("span")
    //获取按钮
    let button1 = document.querySelectorAll("button")[0]


    // 点击事件函数
    button1.onclick = function () {

        //高度*长度 
        var dis = start[0].offsetHeight * Number(start.length)

        // 设置一个初始值
        let a = 20
        aa(a, dis)
        function aa(x1, y1) {
            let distance = y1 - x1  // 全部长度减掉初始值
            let xx = x1   //赋值


            setTimeout(() => {//定时器
                const dist = Math.ceil(distance / 10)  //常量
                //加
                xx += dist
                console.log(xx)
                window.scrollTo(xx, x1)
                // 在调用
                // xx等于初始值+ distance/10 因为每次循环xx都会变大增加，每次循环都会y1减x1 所有distance会变小 所以xx最大只能达到和y1一样大
  if (y1 > xx) {
                    // 
                    aa(xx, y1)
                }
               // aa(xx, y1)

            }, 100)//设置动画时间



        }




    }

</script>

</html>