1. .backToTop {
  2. display: none;
  3. width: 18px;
  4. line-height: 1.2;
  5. padding: 5px 0;
  6. background-color: #000;
  7. color: #fff;
  8. font-size: 12px;
  9. text-align: center;
  10. position: fixed;
  11. _position: absolute;
  12. right: 10px;
  13. bottom: 100px;
  14. _bottom: "auto";
  15. cursor: pointer;
  16. opacity: .6;
  17. filter: Alpha(opacity=60);
  18. }
JS代码:
  1. (function() {
  2. var $backToTopTxt = "返回顶部", $backToTopEle = $('<div class="backToTop"></div>').appendTo($("body"))
  3. .text($backToTopTxt).attr("title", $backToTopTxt).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. })();

css+js回到顶部的更多相关文章

  1. 详解原生JS回到顶部

    第一次知道可以用超链接(锚点)实现回到顶部的时候我是很震惊的,想着原来可以这么简单啊!但是作为一个正在学习JS的小白,不能就这么轻易止步,所以查资料自己整了一个JS返回顶部. HTML代码: ? 1 ...

  2. html css jquery 回到顶部按钮

    今天做了个回到顶部的功能,在这里记录一下,有需要可以拿去试试! CSS部分,很简单就一个class /*回到顶部*/ .back-top { position: fixed; right: 15px; ...

  3. js回到顶部------转载

    [1]锚点 使用锚点链接是一种简单的返回顶部的功能实现.该实现主要在页面顶部放置一个指定名称的锚点链接,然后在页面下方放置一个返回到该锚点的链接,用户点击该链接即可返回到该锚点所在的顶部位置 [注意] ...

  4. CSS实现回到顶部图片hover后改变效果

    任何网站中回到顶部元素不可缺少,一般为了实现交互效果,都会在鼠标hover后元素样式有所改变.今天这个实例便是采用CSS中的transform知识实现. hover: <!DOCTYPE htm ...

  5. js回到顶部

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

  6. 原生js回到顶部

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

  7. JS回到顶部代码小记

    HTML: <div id="goTop"> <a href="#top"><img src="~/Content/th ...

  8. css&js实现顶部banner滚动提示效果

    以一个小例子来展示滚动提示的代码部分: try.html <div id="scrollobj" > <span class="scrollTxt&qu ...

  9. js回到顶部 动画速度 (自己记录)

    x=x-20; 设置回到每10s的速度, function gotoTop(){ var x=document.body.scrollTop||document.documentElement.scr ...

随机推荐

  1. DUILIB圆形头象

    #ifndef __UIHEADICON_H__#define __UIHEADICON_H__ /* 名称:圆形头像控件(派生CButtonUI类)*/ class CHeadUI: public ...

  2. ImageUtil(验证码数据生成工具类)

    登录界面时,常常会使用到验证码图片生成,程序如下: package util; import java.awt.Color; import java.awt.Font; import java.awt ...

  3. jQuery 的属性

    一.显示和隐藏的属性  hide(隐藏),show(显示) 下面是例子 <script type="text/javascript"> $(document).read ...

  4. css 清除浮动最佳方法!

    .clear:after{content:'\0020';display:block;height:0;clear:both} .clear{*zoom:1}

  5. mysql存储过程 --游标的使用 取每行记录 (多字段)

    delimiter $ create PROCEDURE phoneDeal() BEGIN DECLARE id varchar(64); -- id DECLARE phone1 varchar( ...

  6. 用VLC Media Player搭建简单的流媒体服务器

    VLC可以作为播放器使用,也可以搭建服务器. 在经历了Helix Server和Darwin Streaming Server+Perl的失败之后,终于找到了一个搭建流媒体简单好用的方法. 这个网址中 ...

  7. Shell基础-ech0,cat,history,alias,unalias,bash快捷键,wc,执行结果写入文件

    1 系统所支持的shell存放于 /etc/shells 文件中,shell脚本的开头 #!/bing/bash 是指定使用的脚本类型 不能省略,省略之后有些文件可以执行,但容易出错 这行不是注释 2 ...

  8. STL学习笔记

    简介 STL(Standard Template Library),即标准模版库,涵盖了常用的数据结构和算法,并具有跨平台的特点.STL是C++标准函数库的一部分,如下图所示: STL含有容器.算法和 ...

  9. js--webSocket入门

    Websocket 1.websocket是什么? WebSocket是为解决客户端与服务端实时通信而产生的技术.其本质是先通过HTTP/HTTPS协议进行握手后创建一个用于交换数据的TCP连接, 此 ...

  10. mysql主从切换

    mysql 主从切换 主停,从做主步骤如下: 1 确认从服务器已经完成所有同步操作:stop slave io_thread show processlist 直到看到状态都为:xxx has rea ...