孙肖宁

返回顶部小火箭的制作
描述:当用户滑动页面的时候,页面右下角显示返回顶部的小火箭,每当用户点击此小火箭的时候,页面换范返回到页面的顶端。...
扫描右侧二维码阅读全文
18
2018/04

返回顶部小火箭的制作

描述:当用户滑动页面的时候,页面右下角显示返回顶部的小火箭,每当用户点击此小火箭的时候,页面换范返回到页面的顶端。该小火箭是一张图片,用户只需要换成自己的图片即可。
示例代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>返回顶部的小火箭</title>
    <style>
        img {
            position: fixed;
            bottom: 100px;
            right: 50px;
            cursor: pointer;
            display: none;
        }
        div {
            width: 1210px;
            margin: 0 auto;
            height: 5000px;
        }
    </style>
</head>
<body>
<img src="images/Top.jpg"/>
<div></div>
</body>
</html>
<script>
    //获取相关元素,得到点击返回顶部的小火箭
    var img = document.getElementsByTagName("img")[0];
    //控制小火箭的显示和隐藏
    window.onscroll = function () {
        if(scroll().top>100){
            img.style.display="block";
        }else{
            img.style.display="none";
        }
        leader = scroll().top;
    }
    var timer = null;
    //顶部距离
    var target = 0;
    //距离顶部的位置
    var leader = 0;
    //点击之后调用动画函数,使得页面上移
    img.onclick = function () {
        clearInterval(timer);
        timer = setInterval(function () {
            var step = (target-leader)/10;
            step = step>0?Math.ceil(step):Math.floor(step);
            leader=leader+step;
            /*scrollTo(xpos,ypos)
            参数    描述
            xpos    必需。要在窗口文档显示区左上角显示的文档的 x 坐标。
            ypos    必需。要在窗口文档显示区左上角显示的文档的 y 坐标。*/
            window.scrollTo(0,leader);
            if(leader===0){
                clearInterval(timer);
            }
        },25);
    }
    function scroll(){
        return {
            "top": window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop,
            "left":  window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft
        }
    }
</script>
Last modification:April 18th, 2018 at 10:47 am
If you think my article is useful to you, please feel free to appreciate

Leave a Comment