backToTop.js:

  1. (function () {
  2. var $backToTopEle = $('<div class="backToTop"></div>').appendTo($("body"))
  3. .click(function () {
  4. $("html, body").animate({ scrollTop: 0 }, 120);
  5. }), $backToTopFun = function () {
  6. var st = $(document).scrollTop(), winh = $(window).height();
  7. (st > 0) ? $backToTopEle.show() : $backToTopEle.hide();
  8. //IE6下的定位
  9. if (!window.XMLHttpRequest) {
  10. $backToTopEle.css("top", st + winh - 166);
  11. }
  12. };
  13. $(window).bind("scroll", $backToTopFun);
  14. $(function () { $backToTopFun(); });
  15. })();

样式设置:

  1. .backToTop {
  2. display: none;
  3. background:url(../images/go_top.gif);
  4. background-repeat:no-repeat;
  5. background-position:0px 0px;
  6. width:50px;
  7. height:50px;
  8. color: #fff;
  9. font-size: 12px;
  10. text-align: center;
  11. position: fixed;
  12. _position: absolute;
  13. right: 2px;
  14. bottom: 2px;
  15. _bottom: "auto";
  16. cursor: pointer;
  17. opacity: .6;
  18. filter: Alpha(opacity=60);
  19. }
  20. .backToTop:hover
  21. {
  22. background:url(../images/go_top.gif);
  23. background-repeat:no-repeat;
  24. background-position:0px -100px;
  25. }

返回顶部js的更多相关文章

  1. 弹性返回顶部JS代码

    弹性返回顶部JS代码 弹性返回顶部JS代码点击下载

  2. 手机端网页返回顶部js代码

    <!DOCTYPE html>  <html>  <head>  <meta http-equiv="Content-Type" cont ...

  3. gotoTop返回顶部 JS

    方法: 1.首先在body添加一个标签,在一个页面添加,其它页面也会生效. <body> <a name="top"> 2.然后在页脚添加一个链接 < ...

  4. js实现返回顶部功能的解决方案

    很多网站上都有返回顶部的效果,主要有如下几种解决方案. 1.纯js,无动画版本 window.scrollTo(x-coord, y-coord); window.scrollTo(0,0); 2.纯 ...

  5. js返回顶部效果

    当用户浏览的网页过于长的时候,用户在浏览到网页底部想要在返回顶部需要滚动好几次滚轮才能返回顶部,不仅麻烦,而且用户体验也会很差.现在的大多是页面都会在页面顶部或者是页面的可见区域的某一位置固定一个按钮 ...

  6. 原生js实现简洁的返回顶部组件

    本文内容相当简单,所以没有发布到博客园首页,如果你不幸看到,那只能是我这篇文章的荣幸,谢谢你的大驾光临~(本博客返回顶部的功能就使用的是这个组件) 返回顶部组件是一种极其常见的网页功能,需求简单:页面 ...

  7. js+JQuery实现返回顶部功能

    很多网站上都有返回顶部的效果,本文阐述如何使用jquery实现返回顶部按钮. 首先需要在顶部添加如下html元素: <p id="back-to-top"><a  ...

  8. 添加“返回顶部”小图标按钮的JS(JavaScript)代码详解

    如何给自己的网站添加方便快捷的"返回顶部"小图标按钮呢?如下图: JS源代码: /** * JavaScript脚本实现回到页面顶部示例 * @param acceleration ...

  9. 基于原生js的返回顶部组件,兼容主流浏览器

    基于原生js的返回顶部插件,兼容IE8及以上.FF.chrome等主流浏览器. js文件中封装了getScrollTop()和changeScrollTop()函数分别用于获取滚动条滚动的高度和修改滚 ...

随机推荐

  1. shell和vim的配色

    shell的默认配色 mac,需要用iTerm2, 选自带的solarized即可 debian ,选择自带的 solarized dark vim配色 git clone git://github. ...

  2. Env:VIM配置

    注:文章来自于http://www.cnblogs.com/ma6174/archive/2011/12/10/2283393.html 花了很长时间整理的,感觉用起来很方便,共享一下. 我的vim配 ...

  3. [cmd]linux 常用命令

    1. 磁盘/文件大小中占用情况 df -h: 磁盘大小占用情况 du -h file: 文件夹大小,du -ah file文件夹内所有文件占用情况 du -sh dir: 可以查看文件夹大小,而不列出 ...

  4. 原生JavaScript实现的addclass,removeclass,hasclass,toggleclass,getbyclass

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  5. 黄聪:jquery.confirm弹出确认消息

    1.插件介绍 该确认框的默认样式如: 1.1.插件默认参数 // 默认参数 $.confirm.defaults = { // 样式 css: "http://static.qianduan ...

  6. 黄聪:wordpress自动选择上一篇文章选择的分类目录

    有时候,我们需要连续发布同一个分类下的文章,每篇文章都要重新选择分类非常麻烦.下面,我们就用程序来搞定这个问题. add_action('publish_post', 'save_fl' ); add ...

  7. 黄聪:WordPress 多站点建站教程(七):多站点函数

    1.get_blog_details(获取子站点信息) 返回多站点博客信息即wp_blogs表. //显示站点名称 $blog_details = get_blog_details(1); echo ...

  8. Linux 2.6 内核实时性分析 (完善中...)

      经过一个月的学习,目前对linux 下驱动程序的编写有了入门的认识,现在需要着手实践,编写相关的驱动程序. 因为飞控系统对实时性有一定的要求,所以先打算学习linux 2.6 内核的实时性与任务调 ...

  9. (WPF, MVVM) Textbox Binding

    参考:http://msdn.microsoft.com/en-us/library/system.windows.data.updatesourcetrigger(v=vs.110).aspx Te ...

  10. MFC的类层次结构图