案例之小火箭返回顶部

最新推荐文章于 2024-07-16 18:00:00 发布

枫雨血痕

最新推荐文章于 2024-07-16 18:00:00 发布

阅读量1.8k

点赞数 3

分类专栏： javascript 文章标签：案例网页特效 JavaScript

本文链接：https://blog.csdn.net/lyxuefeng/article/details/81843013

版权

效果:页面文档有滚动条，当移动滚轮时，右下角显示小火箭，点击小火箭可返回顶部
思路：当window触发onscroll事件时，得到scrollTop值作为减速运动初始值;当小火箭触发onclick事件时，做减速运动返回顶部
关键知识：onscroll，setInterval，scrollTo
具体代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body {
            width: 2000px;
        }
       .top{
           position: fixed;
           right:50px;
           bottom:100px;
           display: none;
       }
    </style>
</head>
<body>
<div id="gotop" class="top">
    <img src="images/Top.jpg" alt=""/>
</div>
    <p>我是内容部分，有很多恩多很多</p>
    <p>我是内容部分，有很多恩多很多</p>
    <p>我是内容部分，有很多恩多很多</p>
    <p>我是内容部分，有很多恩多很多&