js回到顶部

最新推荐文章于 2023-05-05 14:30:52 发布

JLinZen

最新推荐文章于 2023-05-05 14:30:52 发布

阅读量364

点赞数

分类专栏： Html/Css Javascript 文章标签：回到顶部-js

本文链接：https://blog.csdn.net/jl244981288/article/details/45543161

版权

Javascript 同时被 2 个专栏收录

29 篇文章 0 订阅

订阅专栏

Html/Css

10 篇文章 0 订阅

订阅专栏

今晚，我自己写了一个很简单的回到的顶部的js，同时也希望自己能在原生JS上面有发展，与大家共勉！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>javascript backToTop</title>
</head>
<body>
    <div style="width:100%;height:1000px;"></div>   
    <script type="text/javascript">
        ;(function(){
            var container = document.createElement('div'),
                body = document.getElementsByTagName('body')[0],
                doc = document.body,
                style = [
                    "border: 1px solid #ccc;",
                    "position: fixed;",
                    "width: 40px;",
                    "height: 40px;",
                    "bottom: 100px;",
                    "left: 50%;",
                    "margin-left: 500px;",
                    "z-index: 9999;",
                    "cursor: pointer;",
                    "display: none;"
                ].join(""),
                icon = document.createElement('div'),
                iconStyle = [
                    "width: 10px;",
                    "height: 10px;",
                    "position: absolute;",
                    "border-top: 2px solid #ccc;",
                    "border-left: 2px solid #ccc;",
                    "top: 18px;",
                    "left: 15px;",
                    "transform: rotate(45deg);",
                    "-webkit-transform: rotate(45deg);",
                    "-moz-transform: rotate(45deg);",
                    "-o-transform: rotate(45deg);"
                ].join("");
                container.style.cssText = style;
                icon.style.cssText = iconStyle;
                container.appendChild(icon);
                body.appendChild(container);
                window.addEventListener('scroll',function(){
                    var scrollTop = doc.scrollTop;
                    console.log(scrollTop);
                    if(scrollTop > 200) {
                        container.style.display = "block";
                    } else {
                        container.style.display = "none";
                    }
                },false);
                container.addEventListener('click',function(){
                    setTimeout(function() {
                        document.body.scrollTop = 0;
                    },0);
                },false);
        })();
    </script>
</body>
</html>

JLinZen

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js回到顶部

今晚，我自己写了一个很简单的回到的顶部的js，同时也希望自己能在原生JS上面有发展，与大家共勉！<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>javascript backToTop</title></head><body> <div style="width:100%;heig
复制链接

扫一扫

专栏目录