当前位置:网站首页>点击平滑滚动效果

点击平滑滚动效果

2021-01-04 12:48:20 osc_lg0msmnd

最近要实现一个点击滚动至指定高度的效果
查阅资料后整了个这
随便给自己做个笔记

 <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>

然后写效果

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

    let startTap = start[0].offsetTop //获得顶部距离
    // 点击事件函数
    button1.onclick = function () {
   
   
        //高度*长度 
        var dis = start[0].offsetHeight * Number(start.length)

        // 获取总高度
        let ju1 = document.body.offsetHeight
        aa(ju1, startTap) //要传输的距离
        function aa(x1, y1) {
   
   

            let distance = y1 - x1  //  距离-开始到顶部的距离
            let xx = x1  //顶部距离
            setTimeout(() => {
   
   //定时器
                const dist = Math.ceil(distance / 10)  //常量
                //加
                xx += dist

                window.scrollTo(xx, x1)
                // 在调用
                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>



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

    let startTap = start[0].offsetTop //获得顶部距离
    // 点击事件函数
    button1.onclick = function () {
   
   
        //高度*长度 
        var dis = start[0].offsetHeight * Number(start.length)

        // 获取总高度
        let ju1 = document.body.offsetHeight
        aa(startTap, ju1) //要传输的距离
        function aa(x1, y1) {
   
   

            let distance = y1 - x1  //  距离-开始到顶部的距离
            let xx = x1  //顶部距离
            setTimeout(() => {
   
   //定时器
                const dist = Math.ceil(distance / 10)  //常量
                //加
                xx += dist

                window.scrollTo(xx, x1)
                // 在调用
                aa(xx, y1)

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

</script>

</html>

版权声明
本文为[osc_lg0msmnd]所创,转载请带上原文链接,感谢
https://my.oschina.net/u/4267086/blog/4876180

随机推荐