.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. 关于Linux x64 Oracle JDK7u60 64-bit HotSpot VM 线程栈默认大小问题的整理

    JVM线程的栈默认大小,oracle官网有简单描述: In Java SE 6, the default on Sparc is 512k in the 32-bit VM, and 1024k in ...

  2. 修复 Firefox 下本地使用 Bootstrap 3 时 glyphicon 不显示问题

    本地开发使用 Firefox 调试,遇到了 glyphicon 图标不显示的问题,期初以为是路径问题,搜索一大圈后找到了答案,原来这是一个安全性的问题,于是问题就好办了,解决方案如下: 1. 在Fir ...

  3. Ueditor1.4.3.3+springMvc+maven 实现图片上传

    前记:由于项目中需要有一个新增数据并且要能支持表格图片上传的功能.使用了ueditor控件.为实现这个功能,从一开始什么都看不懂,到一直连着弄了5天,总算是有了眉目.在此记录一下以便能帮到可以和我一样 ...

  4. C# 将文件嵌入DLL 。Log4net 配置

    最近在弄使用Log4net记录日志. 将配置文件封装到的DLL中. 封装步骤: 1.将配置文件添加到类库中. 2.在配置文件上右键,选择属性. 3. 此时生成类库.DLL中就存在该配置文件啦.如图: ...

  5. SVM学习笔记(二):什么是交叉验证

    交叉验证:拟合的好,同时预测也要准确 我们以K折交叉验证(k-folded cross validation)来说明它的具体步骤.{A1,A2,A3,A4,A5,A6,A7,A8,A9} 为了简化,取 ...

  6. IIS上虚拟目录下站点的web.config与根站点的web.config冲突解决方法

    IIS7.5上在站点下部署虚拟目录,访问虚拟目录下的项目提示与父节点配置冲突.,节点与的<system.web>节点与主站点的<system.web>冲突解决方法: 在站点下的 ...

  7. mac 端口转发方案

    mac 端口映射 好坑 osx10.10mac移除了ipfw改用pfpf以前没用过 查文档mac的 pf语法,没有找到.bsd的倒是很全,心喜拿来一试.http://www.openbsd.org/f ...

  8. mysql通过data文件恢复数据库的方式

    1.首先定位mysql的my.ini配置文件,查找datadir的位置 #Path to the database rootdatadir="C:/ProgramData/MySQL/MyS ...

  9. spring boot分布式技术,spring cloud,负载均衡,配置管理器

    spring boot分布式的实现,使用spring cloud技术. 下边是我理解的spring cloud的核心技术: 1.配置服务器 2.注册发现服务器eureka(spring boot默认使 ...

  10. 2-2. Initializing Objects with Initializer Lists

    Using Uniform Initialization to Construct a vector #include <iostream> #include <vector> ...