js滚动到顶部底部代码
2016-06-28 14:16
716 查看
<!DOCTYPE HTML> <html> <head> <meta charset=UTF-8> <title>SCROLL</title> <style type="text/css"> </style> <script type="text/javascript"> var goToWhere = function (where) { var me = this; me.site = []; me.sleep = me.sleep ? me.sleep : 16; me.fx = me.fx ? me.fx : 6; clearInterval (me.interval); var dh = document.documentElement.scrollHeight || document.body.scrollHeight; var height = !!where ? dh : 0; me.interval = setInterval (function () { var top = document.documentElement.scrollTop || document.body.scrollTop; var speed = (height - top) / me.fx; if (speed === me.site[0]) { window.scrollTo (0, height); clearInterval (me.interval); } window.scrollBy (0, speed); me.site.unshift (speed); }, me.sleep); }; </script> </head> <body> <div style="height: 1000px; text-align: center; font-size: 200px; font-weight: bold;">5</div> <div style="height: 1000px; text-align: center; font-size: 200px; font-weight: bold;">4</div> <div style="height: 1000px; text-align: center; font-size: 200px; font-weight: bold;">3</div> <div style="height: 1000px; text-align: center; font-size: 200px; font-weight: bold;">2</div> <div style="height: 1000px; text-align: center; font-size: 200px; font-weight: bold;">1</div> <div style="height: 1000px; text-align: center; font-size: 200px; font-weight: bold;">0</div> <div onclick="goToWhere(0)" style="border: 1px solid red; height: 100px; width: 15px; position: fixed; cursor: pointer; right: 10px; bottom: 150px;">返回顶部</div> <div onclick="goToWhere(1)" style="border: 1px solid red; height: 100px; width: 15px; position: fixed; cursor: pointer; right: 10px; bottom: 30px;">返回底部</div> </body> </html>
相关文章推荐
- C# WebService输出JSON 实现二
- js 按值传递与按引用传递
- JSTL笔记
- Highcharts 功能强大、开源、美观、图表丰富、兼容绝大多数浏览器的纯js图表库
- 工作中遇到的将json重新构建的例子
- JS面向对象基础讲解(工厂模式、构造函数模式、原型模式、混合模式、动态原型模式)
- JavaScript 中的一些坑
- JavaScript框架(二)
- JavaScript框架(一)
- JavaScript宝座:七大框架论剑
- AFNnetworking请求json数据
- JS中原型链的理解
- JS正则表达式验证数字非常全
- 48、JavaScript的运动----无缝运动的实现
- 47、JavaScript的运动----完美运动框架的应用----放大缩小图片的实现(布局转换的实现)
- javascript中的Base64.UTF8编码与解码详解
- 46、JavaScript的运动----完美运动框架的实现----注意运动停止的判断的技巧
- js判断字符长度 汉字算两个字符
- 45、JavaScript的运动----链式运动----回调函数fn参数的添加
- JSON.stringify()、JSON.parse()和eval(string)