返回顶部也是一个常见的效果, 主要是在浏览较长的网页是, 方便用户快速的回到顶部.
首先是一个有滚动效果的长网页
- <!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 元素添加了一个返回顶部按钮, 因为在默认的初始化效果中, 浏览器是置顶的, 所以该按钮是隐藏的.
接下来分析要实现的返回顶部效果.
要实现这个效果, 需要分三步:
返回顶部的按钮的显示与隐藏
- window.onscroll = function () {
- scroll_top = scroll().top;
- scroll_top> 0 ? show($('top')) : hide($('top'));
- };
- 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);
- }
来源: http://www.bubuko.com/infodetail-2771828.html