返回顶部功能(js原生与jq)

最新推荐文章于 2022-06-20 20:06:32 发布

weixin_45070265

最新推荐文章于 2022-06-20 20:06:32 发布

阅读量75

点赞数

分类专栏： javascript 文章标签： javascript js jquery

本文链接：https://blog.csdn.net/weixin_45070265/article/details/107809272

版权

javascript 专栏收录该内容

23 篇文章 1 订阅

订阅专栏

结构样式布局

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

        #rTop{
            width: 30px;
            text-align: center;
            background-color: black;
            color: #ffffff;
            padding: 10px;
            cursor: pointer;
            position: fixed;
            top: 50%;
            transform: translateY(-50%);
            display: none;
        }
        p{
            height: 800px;
            font-size: 32px;
            background-color: pink;
        }
        p:nth-child(2){
            background-color: plum;
        }
        p:nth-child(3){
            background-color: rgb(250, 195, 13);
        }
        p:nth-child(4){
            background-color: rgb(28, 216, 53);
        }
        p:nth-child(5){
            background-color: rgb(133, 122, 240);
        }
        p:nth-child(6){
            background-color: rgb(220, 243, 11);
        }
    </style>
</head>
<body>
    <div id="rTop">返回顶部</div>
    <p>这里的内容只是为了看清效果111</p>
    <p>这里的内容只是为了看清效果222</p>
    <p>这里的内容只是为了看清效果333</p>
    <p>这里的内容只是为了看清效果444</p>
    <p>这里的内容只是为了看清效果555</p>
    <p>这里的内容只是为了看清效果666</p>
</body>
</html>

js原生代码实现

    <script>
        /* 
            需求:当滚动条向下滚动到800时,显示返回顶部按钮
                点击返回顶部按钮,缓慢回到顶部
        */

        //获取元素
        let rTop = document.querySelector('#rTop')

        // 注册窗口滚动事件
        window.onscroll = function () {
            // 获取滚动距离
            let sTop = document.documentElement.scrollTop
            // 判断滚动距离是否大于800
            if (sTop >= 800) {
                // 显示返回顶部按钮
                rTop.style.display = 'block'
            } else {
                // 隐藏按钮
                rTop.style.display = 'none'
            }
        }

        // 给按钮添加点击事件
        rTop.onclick = function () {
            // 确定回到顶部需要的时间
            let t = 1000
            // 距离顶部的距离(兼容性写法)
            let s = document.documentElement.scrollTop || document.body.scrollTop
            // 根据距离和时间计算速度
            let v = s / t
            // 开启计时器
            let timer = setInterval(function () {
                // 每隔30毫秒重新获取距离顶部的距离
                s = document.documentElement.scrollTop || document.body.scrollTop
                // 运动,运动方式为滚动条距离-时间*速度
                document.documentElement.scrollTop = s - 30 * v
                document.body.scrollTop = s - 30 * v
                // 判断如果到达顶部就停止运动
                if (s <= 0) {
                    // 清除计时器
                    clearInterval(timer)
                }
            }, 30)
        }
    </script>

jq代码编写实现

    <!-- 引入jq -->
    <script src="./lib/jquery.min.js"></script>
    <script>
        // 添加窗口滚动事件
        $(window).scroll(function(){
            // 获取滚动距离
            let sTop = $('html,body').scrollTop()
            // 判断滚动距离
            if(sTop>=800){
                // 显示 
                $('#rTop').stop().fadeIn()
            }else{
                // 隐藏
                $('#rTop').stop().fadeOut()
            }
        })

        // 给返回顶部按钮添加点击事件
        $('#rTop').click(function(){
            // 1秒回到顶部  
            $('html,body').stop().animate({scrollTop:'0'},1000)
        })

        /* 
            注意:通常情况下在调用jq动画效果方法之前会先调用stop()方法,这是为了防止动画堆积.
         */
    </script>

补充jq中的stop()方法

stop([bool],[bool]),两个为布尔值的参数,不写参数的情况下默认两个都为false

两个参数分别代表什么?
第一个参数: 是否停止后面的动画? true停止后面的动画, false不停止后面的动画
第二个参数: 立即结束当前动画还是立即完成当前动画? true立即完成当前动画, false立即停止当前对象.

自行测试效果

<!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>
        .box{
            width: 100px;
            height: 100px;
            background-color: skyblue;
            position: relative;
        }
    </style>
</head>
<body>
    <button class="start">animate()</button>
    <button class="stop1">stop()</button>
    <button class="stop2">stop(true,false)</button>
    <button class="stop3">stop(false,true)</button>
    <button class="stop4">stop(true,true)</button>
    <br>
    <br>
    <div class="box"></div>
    <!-- 引入jq -->
    <script src="./lib/jquery.min.js"></script>
    <script>
        $('.start').click(function(){
            $('.box').animate({width:800},2000).animate({height:500},2000).animate({top:300},2000)
        })
        // stop()立即停止当前动画.继续后面的动画
        $('.stop1').click(function(){
            $('.box').stop()
        })
        // stop(true,false)立即停止当前动画,后面的动画也停止
        $('.stop2').click(function(){
            $('.box').stop(true,false)
        })
        // stop(false,true) 立即完成当前动画,继续后面的动画
        $('.stop3').click(function(){
            $('.box').stop(false,true)
        })
        // stop(true,true) 立即完成当前动画,停止后面的动画
        $('.stop4').click(function(){
            $('.box').stop(true,true)
        })
    </script>
</body>
</html>

weixin_45070265

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
返回顶部功能(js原生与jq)

结构样式布局<!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> #rTop{
复制链接

扫一扫