码迷,mamicode.com
首页 > 其他好文 > 详细

返回顶部

时间: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)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!