右下角小火箭，返回顶部-onscroll，scrollTo

最新推荐文章于 2022-05-04 18:15:32 发布

秋天1014童话

最新推荐文章于 2022-05-04 18:15:32 发布

阅读量1.3k

点赞数

分类专栏： web前端 javaScript

本文链接：https://blog.csdn.net/u013217071/article/details/53612157

版权

web前端同时被 2 个专栏收录

128 篇文章 1 订阅

订阅专栏

javaScript

87 篇文章 0 订阅

订阅专栏

右下角小火箭，返回顶部—onscroll，scrollTo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .goTop{
            position: fixed;
            right: 100px;
            bottom: 100px;
            display: none;
        }

    </style>    
</head>
<body>
    <div class="goTop" id="rockToTop">
        <img src="images/top.jpg" alt="">
    </div>
    <div class="content">
        开始了！<br>
        <p>我是内容</p><p>我是内容</p><p>我是内容</p><p>我是内容</p><p>我是内容</p><p>我是内容</p>
        <p>我是内容</p><p>我是内容</p><p>我是内容</p><p>我是内容</p><p>我是内容</p><p>我是内容</p>
        <p>我是内容</p><p>我是内容</p><p>我是内容</p><p>我是内容</p><p>我是内容</p><p>我是内容</p>
        <p>我是内容</p><p>我是内容</p><p>我是内容</p><p>我是内容</p><p>我是内容</p><p>我是内容</p>
        <p>我是内容</p><p>我是内容</p><p>我是内容</p><p>我是内容</p><p>我是内容</p><p>我是内容</p>
        <p>我是内容</p><p>我是内容</p><p>我是内容</p><p>我是内容</p><p>我是内容</p><p>我是内容</p>
        <p>我是内容</p><p>我是内容</p><p>我是内容</p><p>我是内容</p><p>我是内容</p><p>我是内容</p>
        <p>我是内容</p><p>我是内容</p><p>我是内容</p><p>我是内容</p><p>我是内容</p><p>我是内容</p>
        <p>我是内容</p><p>我是内容</p><p>我是内容</p><p>我是内容</p><p>我是内容</p><p>我是内容</p>
        <p>我是内容</p><p>我是内容</p><p>我是内容</p><p>我是内容</p><p>我是内容</p><p>我是内容</p>
    </div>
    <script src="my.js" type="text/javascript"></script>
    <script>    
        function show(id){
            id.style.display="block";
        }
        function hide(id){
            id.style.display="none";
        }
        var rockToTop = document.getElementById('rockToTop');
        window.onscroll = function(){
            scroll().top > 0 ? show(rockToTop) : hide(rockToTop);  // 如果大于0 就显示 否则隐藏
            leader = scroll().top;
        }
        var leader = 0 , target = 0, timer = null;
        rockToTop.onclick = function() {
                target = 0;  //  点击完毕之后 奔向0 去的  不写也可以
                timer = setInterval(function() {
                    leader = leader + (target - leader ) / 10;
                    window.scrollTo(0,leader);  // 去往页面中的某个位置
                     console.log(leader+"  "+target);
                    if(leader == target) {
                        clearInterval(timer);
                    }
                },20);
            }

    </script>
</body>
</html>

my.js

function show(obj) { obj.style.display = "block";}
function hide(obj) { obj.style.display = "none";}
function scroll() {
    if(window.pageYOffset != null)  //  ie9+ 和其他浏览器
    {
        return {
            left: window.pageXOffset,
            top: window.pageYOffset
        }
    }
    else if(document.compatMode == "CSS1Compat")  // 声明的了 DTD
    // 检测是不是怪异模式的浏览器 -- 就是没有 声明<!DOCTYPE html>
    {
        return {
            left: document.documentElement.scrollLeft,
            top: document.documentElement.scrollTop
        }
    }
    return { //  剩下的肯定是怪异模式的
        left: document.body.scrollLeft,
        top: document.body.scrollTop
    }

秋天1014童话

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
右下角小火箭，返回顶部-onscroll，scrollTo

右下角小火箭，返回顶部—onscroll，scrollTo<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> *{ padding: 0; margin: 0;
复制链接

扫一扫