返回顶部js
backToTop.js:
(function () {
var $backToTopEle = $('<div class="backToTop"></div>').appendTo($("body"))
.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(); });
})();
样式设置:
.backToTop {
display: none;
background:url(../images/go_top.gif);
background-repeat:no-repeat;
background-position:0px 0px;
width:50px;
height:50px;
color: #fff;
font-size: 12px;
text-align: center;
position: fixed;
_position: absolute;
right: 2px;
bottom: 2px;
_bottom: "auto";
cursor: pointer;
opacity: .6;
filter: Alpha(opacity=60);
}
.backToTop:hover
{
background:url(../images/go_top.gif);
background-repeat:no-repeat;
background-position:0px -100px;
}
返回顶部js的更多相关文章
- 弹性返回顶部JS代码
弹性返回顶部JS代码 弹性返回顶部JS代码点击下载
- 手机端网页返回顶部js代码
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" cont ...
- gotoTop返回顶部 JS
方法: 1.首先在body添加一个标签,在一个页面添加,其它页面也会生效. <body> <a name="top"> 2.然后在页脚添加一个链接 < ...
- js实现返回顶部功能的解决方案
很多网站上都有返回顶部的效果,主要有如下几种解决方案. 1.纯js,无动画版本 window.scrollTo(x-coord, y-coord); window.scrollTo(0,0); 2.纯 ...
- js返回顶部效果
当用户浏览的网页过于长的时候,用户在浏览到网页底部想要在返回顶部需要滚动好几次滚轮才能返回顶部,不仅麻烦,而且用户体验也会很差.现在的大多是页面都会在页面顶部或者是页面的可见区域的某一位置固定一个按钮 ...
- 原生js实现简洁的返回顶部组件
本文内容相当简单,所以没有发布到博客园首页,如果你不幸看到,那只能是我这篇文章的荣幸,谢谢你的大驾光临~(本博客返回顶部的功能就使用的是这个组件) 返回顶部组件是一种极其常见的网页功能,需求简单:页面 ...
- js+JQuery实现返回顶部功能
很多网站上都有返回顶部的效果,本文阐述如何使用jquery实现返回顶部按钮. 首先需要在顶部添加如下html元素: <p id="back-to-top"><a ...
- 添加“返回顶部”小图标按钮的JS(JavaScript)代码详解
如何给自己的网站添加方便快捷的"返回顶部"小图标按钮呢?如下图: JS源代码: /** * JavaScript脚本实现回到页面顶部示例 * @param acceleration ...
- 基于原生js的返回顶部组件,兼容主流浏览器
基于原生js的返回顶部插件,兼容IE8及以上.FF.chrome等主流浏览器. js文件中封装了getScrollTop()和changeScrollTop()函数分别用于获取滚动条滚动的高度和修改滚 ...
随机推荐
- Python列表,元组,字典,序列,引用
1.列表 # Filename: using_list.py # This is my shopping list shoplist=["apple", "mango&q ...
- [系统开发] FileMaker进销存系统
一.简介 这是我用 FileMaker 编写的进销存系统: FileMaker 是一种在欧美流行的桌面型数据库:它使用非常方便,功能也很强大,用户可以在它上面开发自己的系统: 开发时间:2008年 二 ...
- Windows 7 的系统文件修复:sfc /scannow
在线检查与修复 C:\Windows\system32>sfc /scannow 开始系统扫描.此过程将需要一些时间. 开始系统扫描的验证阶段. 验证 100% 已完成. Windows 资源保 ...
- SQL Server 格式化时间 之 format函数
select format(getdate(),'yyyy-MM-dd HH:mm:ss'); 要注意 yyyy-MM-dd这里MM是大写的, HH:mm:ss这里HH是大写的,mm是小写的,大小写意 ...
- -all_load,-ObjC,-force_load三者的区别
参考:https://developer.apple.com/library/mac/qa/qa1490/_index.html,http://www.cnblogs.com/YouXianMing/ ...
- 黄聪:C#超级延时方法,延迟系统时间但系统又能同时能执行其它任务
private void Delay(int Millisecond) //延迟系统时间,但系统又能同时能执行其它任务: { DateTime current = DateTime.Now; whil ...
- Top 6 Programming Languages for Mobile App Development
Mobile application development industry in the last five years have multiplied in leaps and bounds, ...
- shell 的语法
SHELL 的语法 n 变量:字符串,数字,环境和参数 n 条件:shell中的布尔值 n 程序控制:if, elif, for, while until, case n 命令列表 n 函数 ...
- Spark on yarn配置项说明与优化整理
配置于spark-default.conf 1. #spark.yarn.applicationMaster.waitTries 5 用于applicationMaster等待Spark maste ...
- NeHe OpenGL教程 第十二课:显示列表
转自[翻译]NeHe OpenGL 教程 前言 声明,此 NeHe OpenGL教程系列文章由51博客yarin翻译(2010-08-19),本博客为转载并稍加整理与修改.对NeHe的OpenGL管线 ...