点击按钮置顶案例

最新推荐文章于 2024-04-15 00:49:07 发布

SpringYoungYu

最新推荐文章于 2024-04-15 00:49:07 发布

阅读量562

点赞数

文章标签： js

本文链接：https://blog.csdn.net/qq_44917015/article/details/111862571

版权

<!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>
        .topBtn{
            width: 50px;
            height: 50px;
            border: 1px solid #000;
            box-shadow: 2px 2px 2px 2px #ccc;
            text-align: center;
            font-size: 40px;
            line-height: 60px;
            outline: 1px solid #000;
            outline-offset: 0px;
            position: fixed;
            bottom: 100px;
            right:100px;
            transition: all 0.5s;
            display: none;
        }
        .topBtn:hover{
            outline-offset: 20px;
        }
    </style>
</head>
<body>
    <div class="topBtn">
        ^
    </div>
    <script>

        var topbtn;
        var bool = false;
        init()
        function init(){
            topbtn = document.querySelector('.topBtn');
            topbtn.onclick = clickHandler;
            window.onscroll = scrollHandler
            setInterval( enterFrame,16)
        }
        function clickHandler(){
            // console.log(111)
            bool = true;
        }
        function scrollHandler(){
            if(document.documentElement.scrollTop > document.documentElement.clientHeight){
                topbtn.style.display = "block"
            }else{
                topbtn.style.display = "none"
            }
        }
        function enterFrame(){
            console.log(13123)
            if( !bool ) return;
            document.documentElement.scrollTop -= 100
            if(document.documentElement.scrollTop === 0) bool = false
        }
        for(var i=0;i<10;i++){
            ce('img',null,document.body,{
                src:'../img/a.png'
            })
        }
        function ce(type, style, parent, props) {
            let elem = document.createElement(type)
            for (let prop in style) {
                elem.style[prop] = style[prop]
            }
            for (let prop in props) {
                elem[prop] = props[prop]
            }
            if (parent) parent.appendChild(elem)
            return elem
        }
    </script>
</body>
</html>

SpringYoungYu

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
点击按钮置顶案例

<!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> .topBtn{
复制链接

扫一扫