.backToTop {
display: none;
width: 18px;
line-height: 1.2;
padding: 5px 0;
background-color: #000;
color: #fff;
font-size: 12px;
text-align: center;
position: fixed;
_position: absolute;
right: 10px;
bottom: 100px;
_bottom: "auto";
cursor: pointer;
opacity: .6;
filter: Alpha(opacity=60);
}
JS代码:
(function() {
var $backToTopTxt = "返回顶部", $backToTopEle = $('<div class="backToTop"></div>').appendTo($("body"))
.text($backToTopTxt).attr("title", $backToTopTxt).click(function() {
$("html, body").animate({ scrollTop: 0 }, 120);
}), $backToTopFun = function() {
var st = $(document).scrollTop(), winh = $(window).height();
(st > 0)? $backToTopEle.show(): $backToTopEle.hide();
//IE6下的定位
if (!window.XMLHttpRequest) {
$backToTopEle.css("top", st + winh - 166);
}
};
$(window).bind("scroll", $backToTopFun);
$(function() { $backToTopFun(); });
})();

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. Android的post()方法究竟运行在哪个线程中

    Android中我们常用的post()方法大致有两种情况: 1.如果post方法是handler的,则Runnable执行在handler依附线程中,可能是主线程,也可能是其他线程 2.如果post方 ...

  2. (转)oracle中用户删除不了,ORA-01940提示 “无法删除当前已连接用户”

    Oracle删除用户的提示无法删除当前已连接用户两种解决方法如下: 1.先锁定用户.然后查询进程号,最后删除对应的进程.在删除对应的用户 SQLalter user XXX account lock; ...

  3. [z]查表空间使用情况

    SELECT UPPER(F.TABLESPACE_NAME) "表空间名",D.TOT_GROOTTE_MB "表空间大小(M)",D.TOT_GROOTTE ...

  4. java class的兼容问题

    前不久在工作中,遇到了几次编译class引起的NoSuchMethodError,经过分析与测试验证,也算是搞清楚了中间的来龙去脉,现在把一些结论性的东西(附带一些过程性的分析)分享出来. 在使用ja ...

  5. Python.Module.site

    site " This module is automatically imported during initialization. The automatic import can be ...

  6. 第五章 springboot + mybatis(转载)

    本编博客转发自:http://www.cnblogs.com/java-zhao/p/5350021.html springboot集成了springJDBC与JPA,但是没有集成mybatis,所以 ...

  7. 【转载】最完美解决Nginx部署ThinkPHP项目的办法

    网上通用解决方法的配置如下: server { ... location / { index index.htm index.html index.php; #访问路径的文件不存在则重写URL转交给T ...

  8. SVN使用总结

    ## 常用命令 建立分支 --- svn copy/cp svn cp http://example.com/repos/myproject/trunk http://example.com/repo ...

  9. mysql galera cluster 集群的分裂与仲裁机制

    集群的分裂 当集群由于网络原因分裂为几个单独的组时(一组可能是单节点,也可能是几个互联的节点),数据出现不一致,此时可能产生脑裂及数据不一致.这种情况 下,只有一组节点能够继续提供服务,这组节点的状态 ...

  10. shell学习--grep1

    一. grep的来源 通过ex编辑器来查找某个字串: :/pattern/p 其中p是打印,包含字符串pattern的第一行将被打印:如果需要打印包含pattern的所有行,可以这样: :/g/pat ...