返回顶部小火箭

最新推荐文章于 2020-12-10 00:11:07 发布

python基础教程

最新推荐文章于 2020-12-10 00:11:07 发布

阅读量1.1k

点赞数

分类专栏： 01前端基础教程html_css_js

本文链接：https://blog.csdn.net/stopcpp/article/details/52846435

版权

01前端基础教程html_css_js 专栏收录该内容

78 篇文章 0 订阅

订阅专栏

利用window.scrollTo(x,y) 把内容滚动到指定坐标

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .top{
            position: fixed;
            right: 50px;
            bottom: 100px;
            display: none;
        }
    </style>
    <script src="my.js" type="text/javascript"></script>
    <script>
        window.onload = function () {
            var gotop = $("gotop");
            var start = 0,end =0; //start是开始位置，end是结束位置 结束位置为0.
            var timer = null; //定时器
            var scrollTop = 0;
            window.onscroll = function () {
                scroll().top> 200 ? show(gotop) :hide(gotop);
                start = scroll().top;
            }
            gotop.onclick = function () {
                end=0;
                timer = setInterval(function(){
                    start = start + (end - start) /10;
                    window.scrollTo(0,start);  //把内容滚动到指定坐标
                    if(start == end){
                        clearInterval(timer);
                    }
                },10);
            }
        }
    </script>
</head>
<body>
    <div class="top" id="gotop">
        <img src="images/gotop.jpg" alt=""/>
    </div>
    <p>这里是很多的文字</p>
    <p>这里是很多的文字</p>
    <p>这里是很多的文字</p>
    <p>这里是很多的文字</p>
    <p>这里是很多的文字</p>
    <p>这里是很多的文字</p>
    <p>这里是很多的文字</p>
    <p>这里是很多的文字</p>
    <p>这里是很多的文字</p>
    <p>这里是很多的文字</p>
    <p>这里是很多的文字</p>
    <p>这里是很多的文字</p>
    <p>这里是很多的文字</p>
    <p>这里是很多的文字</p>
    <p>这里是很多的文字</p>
    <p>这里是很多的文字</p>
    <p>这里是很多的文字</p>
    <p>这里是很多的文字</p>
    <p>这里是很多的文字</p>
    <p>这里是很多的文字</p>
    <p>这里是很多的文字</p>
    <p>这里是很多的文字</p>
    <p>这里是很多的文字</p>
    <p>这里是很多的文字</p>
    <p>这里是很多的文字</p>
    <p>这里是很多的文字</p>
    <p>这里是很多的文字</p>
    <p>这里是很多的文字</p>
    <p>这里是很多的文字</p>
    <p>这里是很多的文字</p>
    <p>这里是很多的文字</p>
    <p>这里是很多的文字</p>
    <p>这里是很多的文字</p>
</body>
</html>

python基础教程

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
返回顶部小火箭

利用window.scrollTo(x,y) 把内容滚动到指定坐标<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> .top{ position: fixed; right: 50px;
复制链接

扫一扫