css+js回到顶部
.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回到顶部的更多相关文章
- 详解原生JS回到顶部
第一次知道可以用超链接(锚点)实现回到顶部的时候我是很震惊的,想着原来可以这么简单啊!但是作为一个正在学习JS的小白,不能就这么轻易止步,所以查资料自己整了一个JS返回顶部. HTML代码: ? 1 ...
- html css jquery 回到顶部按钮
今天做了个回到顶部的功能,在这里记录一下,有需要可以拿去试试! CSS部分,很简单就一个class /*回到顶部*/ .back-top { position: fixed; right: 15px; ...
- js回到顶部------转载
[1]锚点 使用锚点链接是一种简单的返回顶部的功能实现.该实现主要在页面顶部放置一个指定名称的锚点链接,然后在页面下方放置一个返回到该锚点的链接,用户点击该链接即可返回到该锚点所在的顶部位置 [注意] ...
- CSS实现回到顶部图片hover后改变效果
任何网站中回到顶部元素不可缺少,一般为了实现交互效果,都会在鼠标hover后元素样式有所改变.今天这个实例便是采用CSS中的transform知识实现. hover: <!DOCTYPE htm ...
- js回到顶部
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 原生js回到顶部
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- JS回到顶部代码小记
HTML: <div id="goTop"> <a href="#top"><img src="~/Content/th ...
- css&js实现顶部banner滚动提示效果
以一个小例子来展示滚动提示的代码部分: try.html <div id="scrollobj" > <span class="scrollTxt&qu ...
- js回到顶部 动画速度 (自己记录)
x=x-20; 设置回到每10s的速度, function gotoTop(){ var x=document.body.scrollTop||document.documentElement.scr ...
随机推荐
- C语言字符串拷贝
C语言字符串拷贝利用指针操作,要清楚知道指针的指向 代码如下: #include <stdio.h> #include <assert.h> #include <stri ...
- [OC笔记]@property之个人理解,大神轻拍
/** * 一个简单的对象 * * @author suzhen * */ public class SimpleObjcet { /** * 声明一个age字段 */ private Object ...
- mysql计划字段中有多少个逗号,或者某个标识符
eg:计划url中有多少个小数点 select length('www.mysql.com')-length(REPLACE('www.mysql.com','.',''));
- c语言选择排序
简单选择排序是经常用到的一种排序算法. 原理: 1.简单选择排序一句话概括:每次选择无序数列中最小的将其放在有序数列的最后. 2.在简单选择排序中,我们用初始化的数字int a[6]={2,5,6,3 ...
- PHP移动文件指针ftell()、fseek()、rewind()总结
在对文件进行读写过程中,有时需要在文件中跳转.同不同位置读取,以及将数据写入到不同的位置.例如,使用文件模拟数据库保存数据,就需要移动文件指针.指针的位置是以从文件头开始的字节数度量的,默认以不同模式 ...
- 用POI读取具有任意合并单元的excel数据
maven依赖: <dependency> <groupId>org.apache.poi</groupId> <artifactId>poi</ ...
- Oracle如何导入导出数据(转自)
导出:exp ssht/taxware@sshtfile=d:\ssht.dmpexp 用户名/密码@服务名导入:imp ssht/taxware@mysshtfile=d:\ssht.dmp fro ...
- 如何让aspnet服务加载静态资源html(我的动态网页静态化) 转
我们知道,IIS自身是不能处理像ASPX扩展名这样的页面,只能直接请求像HTML这样的静态文件. 当客户端请求一个服务器资源时,这个HTTP请求会被inetinfo.exe进程截获(www服务),然后 ...
- cookie session URL重写 与考试
状态管理.Cookie.Session.URL重写 HTTP协议:无状态的连接(每次连接都是新的请求)1.隐藏字段 <input type="hidden" name=&qu ...
- less 里面 opacity的写法
今天写了个opacity, 竟然less编译不过,上网搜了一个写法 .opacity (@opacity) { @opacityPercentage: @opacity * 100; opacity: ...