返回顶部

最新推荐文章于 2024-06-20 09:14:57 发布

哎哟嘿

最新推荐文章于 2024-06-20 09:14:57 发布

阅读量335

点赞数

分类专栏： JavaScript

本文链接：https://blog.youkuaiyun.com/d295968572/article/details/61950556

版权

JavaScript 专栏收录该内容

7 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    #top{
        right:20px;
        bottom:20px;
        position:fixed;
        cursor: pointer;
        display: none;
    }
</style>
<body style="height: 1500px">

    <p>1qqqq11111;</p>
    <p>asdkfjasdjflajsdlfjasld;jfladsjfldskajflk</p>

    <div id="top">返回顶部</div>
</body>
<script>

    function isChrome(){
        nu=navigator.userAgent;     //判断浏览器内核
        //alert(nu)
        if(nu.match(/safari/i)){        //判断是否是safari Chrome使用的就是Safari内核
            return true;
        } else {
            return false;
        }

    }

    topobj=document.getElementById('top');


    window.οnscrοll=function() {

        if (isChrome()) {               //是safari内核,使用body获取屏幕高
            osTop = document.body.scrollTop;
            if (osTop > 300) {
                topobj.style.display = 'block'
            } else {
                topobj.style.display = 'none'
            }
        }
        else{                           // 不是safari内核,使用documentElement获取屏幕高
                osTop = document.documentElement.scrollTop;
                if (osTop > 300) {
                    topobj.style.display = 'block'
                } else {
                    topobj.style.display = 'none'
                }
            document.title=osTop;

        }

    };
    topobj.οnclick=function () {
        timer=setInterval(function () {

            //获取滚动条的滚动高度
            var osTop = document.documentElement.scrollTop || document.body.scrollTop;
            //用于设置速度差，产生缓动的效果
            var speed = Math.floor(-osTop / 6);
            document.documentElement.scrollTop = document.body.scrollTop = osTop + speed;
            isTop =true;  //用于阻止滚动事件清除定时器
            if(osTop == 0){
                clearInterval(timer);
            }

        },30);
    };

   /*
    //第二种方法无序判断浏览器内核

    var topobj=document.getElementById('top');
    var clientHeight = document.documentElement.clientHeight;   //获取可视区域的高度
    var timer = null; //定义一个定时器
    var isTop = true; //定义一个布尔值，用于判断是否到达顶部

    window.onscroll = function(){         //滚动条滚动事件

        //获取滚动条的滚动高度
        var osTop = document.documentElement.scrollTop || document.body.scrollTop;

        if(osTop >= clientHeight){  //如果滚动高度大于可视区域高度，则显示回到顶部按钮
            topobj.style.display = 'block';
        }else{         //否则隐藏
            topobj.style.display = 'none';
        }

        //主要用于判断当 点击回到顶部按钮后 滚动条在回滚过程中，若手动滚动滚动条，则清除定时器
        if(!isTop){

            clearInterval(timer);
        }
        isTop = false;

    };


    topobj.οnclick=function () {
        timer=setInterval(function () {

                //获取滚动条的滚动高度
                var osTop = document.documentElement.scrollTop || document.body.scrollTop;
                //用于设置速度差，产生缓动的效果
                var speed = Math.floor(-osTop / 6);
                document.documentElement.scrollTop = document.body.scrollTop = osTop + speed;
                isTop =true;  //用于阻止滚动事件清除定时器
                if(osTop == 0){
                    clearInterval(timer);
                }

        },30);
    }
*/


</script>
</html>