jQuery常用案例之回到顶部

最新推荐文章于 2022-05-17 20:33:28 发布

小龙爷ღ

最新推荐文章于 2022-05-17 20:33:28 发布

阅读量217

点赞数

分类专栏： JQuery 文章标签： jQuery的定时器回到顶部例子 setInterval使用

本文链接：https://blog.csdn.net/qq_45086879/article/details/100132169

版权

JQuery 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

今天讲个十分常用的案例：点击回到顶部按钮，无论当前处于页面哪个部分都将回到顶部

直接看案例：采用距离间隔停顿，定时器循环的做法，达到平缓回到顶部做法，而不是瞬间回到顶部

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>回到顶部案例</title>
    <style>
        #to_top {
            width: 30px;
            height: 40px;
            font: 14px/20px arial;
            text-align: center;
            background: #06c;
            position: fixed;
            cursor: pointer;
            color: #fff;
            left: 1050px;
            top: 500px;
        }
    </style>
</head>
<body style="height: 2000px;">

<div id="to_top">返回顶部</div>

<script src="js/jquery-3.4.1.min.js"></script>
<script>
    $('#to_top').click(function () {
        // 瞬间滚到顶部
        //$('html,body').scrollTop(0)

        // 平滑滚到顶部
        // 总距离
        var $page = $('html,body')
        var distance = $('html').scrollTop() + $('body').scrollTop()
        // 总时间
        var time = 500
        // 间隔时间
        var intervalTime = 25
        var itemDistance = distance/(time/intervalTime)
        // 使用循环定时器不断滚动
        var intervalId = setInterval(function () {
            distance -= itemDistance
            // 到达顶部, 停止定时器
            if(distance<=0) {
                distance = 0 //修正
                clearInterval(intervalId)
            }
            $page.scrollTop(distance)
        }, intervalTime)

    })
</script>
</body>
</html>

总结：主要是分割思想和定时器的应用，判断到达顶部的时候停止定时器，熟能生巧

小龙爷ღ

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery常用案例之回到顶部

今天讲个十分常用的案例：点击回到顶部按钮，无论当前处于页面哪个部分都将回到顶部直接看案例：采用距离间隔停顿，定时器循环的做法，达到平缓回到顶部做法，而不是瞬间回到顶部<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title&...
复制链接

扫一扫