点页面侧边按钮进行js置顶

点页面侧边按钮进行js置顶


image


<div id="scroll" ><img src="按钮图片"></div>

<style type="text/css">

    #scroll {

        width: 62px;

        height: 50px;

        right: 10px;

        bottom: 50px;     

        cursor: pointer;

        position: fixed;  

    }

  div#scroll img {

    width: 40px;

    height: 40px;

    background: #4682b4;

    padding: 2px;

    border-radius: 2px;

}

    </style>

<script>

 

    var oBtn = document.getElementById('scroll');

 

    oBtn.onclick = function () {

        oBtn.style.backgroundPosition = '-199px -2px';

        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

        /*ie chrome兼容 滚动条距离上方高度*/

 

        var timer = setInterval(function () {

            scrollTop -= 20;

            window.scrollTo(0, scrollTop);

            /*(x,y)*/

            if (scrollTop <= 0) {/*滚动距离小于等于0 清除定时器*/

                clearInterval(timer);

                var timer1 = setTimeout(function () {

                    oBtn.style.backgroundPosition = '-22px -5px';

                }, 1000);

            }

        }, 2);

    }

</script>




微信扫码咨询
建站咨询
cache
Processed in 0.011075 Second.