1. function goTop(){
  2. var _btn = document.getElementById("goTop");
  3. if (document.documentElement && document.documentElement.scrollTop) {
  4. var _con = document.documentElement;
  5. }
  6. else if (document.body) {
  7. var _con = document.body;
  8. }
  9. window.onscroll = set;
  10. _btn.style.left = "125px";
  11. _btn.onclick = function() {
  12. _btn.style.display = "none";
  13. window.onscroll = null;
  14. this.timer = setInterval(function() {
  15. _con.scrollTop -= Math.ceil(_con.scrollTop * 0.3);
  16. if (_con.scrollTop == 0) {
  17. clearInterval(_btn.timer, window.onscroll = set);
  18. }
  19. }, 10);
  20. };
  21. function set() {
  22. _btn.style.display = _con.scrollTop ? 'block': "none";
  23. }
  24. };
  25. document.write("<div id=\"goTop\" style=\"font-size:12px; width:20px; height:55px; background:#0950A2; color:#fff; line-height:14px; position:fixed; bottom:30px; display:none; cursor:pointer; text-align:center; padding:5px 0; z-index:1; _position:absolute; _top:expression(eval(document.compatMode && document.compatMode == \'CSS1Compat\') ? documentElement.scrollTop + (documentElement.clientHeight - this.clientHeight) - 30 : document.body.scrollTop + (document.body.clientHeight - this.clientHeight) - 30);\">返回顶部</div>");
  26. window.onscroll = goTop;

回到顶端js实现的更多相关文章

  1. js监听滚动条 回到顶端

    效果:当出现滚动条,且滚动条出现移动时,把回到顶端按钮 显示出来:当滚动条回到顶部时,将回到顶端按钮隐藏. <script type="text/javascript"> ...

  2. csdn回到顶端

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. 回到顶端的jquery

    现在的淘宝啊,京东啊,各种网站都有一个功能,有一个按钮,在页面最顶端的时候不会显示,当往下拉到一定的时候会出现.点击他会直接跳到页面的顶端.代码如下: html代码: <div id=" ...

  4. 回到顶部js代码

    function go_to_top(){ //把内容滚动指定的像素数(第一个参数是向右滚动的像素数,第二个参数是向下滚动的像素数) window.scrollBy(0,-10); //延时递归调用, ...

  5. JS实现回到Top(顶部)--JavaScript

    当我们浏览一段很长的网页时,已经看到底部了,想回到顶部看前面的内容,可是需要滚动好几转鼠标滑轮或者拉动滚动条走好长“一段路”.这对于用户来说,体验效果是不够好的.如果我们借助简单的一个按钮,点击一下就 ...

  6. 自写jquery网页回到顶部效果,渐隐图标,引用js文件就可以

    唔.进来开发需求,当网页内容草鸡多的时候,用户就须要有个button高速回到顶部,而不是自己去滚滑轮~ 原本以为比較难的说,由于上头要求所实用js来实现,哪个页面引用,哪个页面显示. 于是乎,本屌丝就 ...

  7. JQuery 回到顶部效果

    图片,CSS/HTML/JS代码都在,可以直接用了. CSS代码 <style type="text/css"> #gs_feedback_gotop { _displ ...

  8. Selenium2+python自动化-使用JS脚本处理网页滚动条

    内容来自:https://www.cnblogs.com/yoyoketang/p/6128655.html JS相关知识:http://www.w3school.com.cn/js/index.as ...

  9. Node.js入门笔记(1):基本概念

    Node.js和JavaScript: 核心都是ECMAScrit,比如数据类型,语法结构,内置对象等等. 但是在js中顶层是window 在node中的不存在这个window(console.log ...

随机推荐

  1. [No000061]"别人"凭什么要帮你?&理解中国人的人际和谐&外人、自己人与另一半

    你出身平凡家庭:你毕业于普通大学:你没有田晓霞这样的妻子或者普京这样的丈夫:在权力.金钱乃至能力积累上,你才刚刚上路.你很年轻,你渴望成功,那么,"别人"凭什么帮你? " ...

  2. combobox 属性、事件、方法

    一 .combobox 属性.事件.方法公共属性 名称 说明 AccessibilityObject 获取分配给该控件的 AccessibleObject. AccessibleDefaultActi ...

  3. Android屏幕禁止休眠的方法

    实现这一功能的方法有两种,一种是在Manifest.xml文件里面声明,一种是在代码里面修改LayoutParams的标志位.具体如下: 1.在Manifest.xml文件里面用user-permis ...

  4. nginx的主要用途

    1.反向代理加速(无缓存),简单的负载均衡和容错  : 问题一:为什么反向代理可以做加速服务器? 反向代理接受发给web服务器的真实请求,但与web服务器不同的是,它们可以向其他的服务器进行通信.以便 ...

  5. BZOJ 3309: DZY Loves Math

    3309: DZY Loves Math Time Limit: 20 Sec  Memory Limit: 512 MBSubmit: 761  Solved: 401[Submit][Status ...

  6. PAT 1025. 反转链表 (25)

    给定一个常数K以及一个单链表L,请编写程序将L中每K个结点反转.例如:给定L为1→2→3→4→5→6,K为3,则输出应该为3→2→1→6→5→4:如果K为4,则输出应该为4→3→2→1→5→6,即最后 ...

  7. LeetCode 01 Two Sum swift

    class TwoSum { func sumTow(nums: [Int], target: Int)->[Int]{ ,]; ;x<nums.count;x++){ ;y<num ...

  8. [转]Spring JdbcTemplate 查询分页

    原文:http://blog.csdn.net/xiaofanku/article/details/4280128 现在进行的项目由于数据库的遗留原因(设计的不堪入目)不能用hibernate.所以用 ...

  9. MVP 实例

    引言 可能有的朋友已经看过我翻译的Jean-Paul Boodhoo的 模型-视图-提供器 模式 一文了(如果没有,建议你先看下再看这篇文章,毕竟这两篇是紧密联系的).在那篇文章中,作者为了说明 MV ...

  10. scala 学习笔记(06) OOP(下)多重继承 及 AOP

    一.多继承 上篇trait中,已经看到了其用法十分灵活,可以借此实现类似"多重继承"的效果,语法格式为: class/trait A extends B with C with D ...