返回顶部

时间：2018-09-18 00:28:20 阅读：111 评论：0 收藏：0 [点我收藏+]

标签：高度 class 定义方便 var 初始 head padding image

返回顶部也是一个常见的效果，主要是在浏览较长的网页是，方便用户快速的回到顶部。

首先是一个有滚动效果的长网页

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
            border: none;
        }

        body {
            background-color: #ccc;
        }

        p {
            margin-bottom: 20px;
            text-align: center;
        }

        #top {
            width: 43px;
            height: 43px;
            background: url("images/top.png") no-repeat;
            background-size: 100% 100%;
            position: fixed;
            right: 10px;
            bottom: 30px;
            display: none;
        }
    </style>
</head>
<body>
<span id="top"></span>
<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>
<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>

在上面的页面结构中，我们用span元素添加了一个返回顶部按钮，因为在默认的初始化效果中，浏览器是置顶的，所以该按钮是隐藏的。

接下来分析要实现的返回顶部效果。

要实现这个效果，需要分三步：

返回顶部的按钮的显示与隐藏
返回顶部的效果：卷起的高度为0，
动画效果

常见的网页会设置，当网页卷起一定的高度时，才出现返回顶部的按钮，这里只是为了展示效果，所有定义为只要出现了滚动，就显示返回顶部按钮。

 window.onscroll = function () {
            scroll_top = scroll().top;
            scroll_top > 0 ? show($(‘top‘)) : hide($(‘top‘));
        };

返回顶部的起始效果是卷起高度的值，结束效果是卷起高度为0，在这个变化过程中，添加动画

  var scroll_top = 0, begin = 0, end = 0, timer = null;
begin = scroll_top;
$("top").onclick = function () {
            clearInterval(timer);
            timer = setInterval(function () {
                begin = begin + (end - begin) / 20;
                window.scrollTo(0, begin);
                if(Math.round(begin) === end){
                    clearInterval(timer);
                }
            }, 20);
        }

完整详细代码下载：点这里

返回顶部

标签：高度 class 定义方便 var 初始 head padding image

原文地址：https://www.cnblogs.com/yuyujuan/p/9665492.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行