返回顶部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()函数分别用于获取滚动条滚动的高度和修改滚 ...
随机推荐
- Tomcat的startup.bat一闪而过问题的解决
问题描述:点击Tomcat的startup.bat,一闪而过. 问题分析: 1.Tomcat的startup.bat--->catalina.bat--->setclasspath.bat ...
- Linux常用命令记录
产用Linux命令 cat /proc/partitions //查看系统分区情况 fdisk -l /dev/sdb //查看磁盘物理存储 mount /dev/目录 /mnt/目录 //挂载文件 ...
- 如何把SQLServer数据库从高版本降级到低版本?
http://blog.csdn.net/dba_huangzj/article/details/7952403 由于目前还广泛使用着SQLServer2000,很多公司又想使用新的SQLServer ...
- Linux LVM简明教程
逻辑卷管理LVM是一个多才多艺的硬盘系统工具.无论在Linux或者其他类似的系统,都是非常的好用.传统分区使用固定大小分区,重新调整大小十分麻烦.但是,LVM可以创建和管理“逻辑”卷,而不是直接使用物 ...
- Orcale(一)概念
一 . 基本概念 : 1. orcaleinstanceclient : orcale的客户端 ( 1. 中文乱码问题 : NLS_LANG=SIMPLIFIED CHINESE_CHINA.Z ...
- MyEclipse9中的不伤眼修改、FreeMarker插件、JQuery提示插件、全屏(FullScreen)插件的安装
============下载相关附件===================== http://files.cnblogs.com/fhtwins/eclipse-fullscreen_1.0.7.zi ...
- My to do 12.25
Merry Christmas 新的一年要来了,参加工作转眼也快半年了.回顾以往,多逢贵人.不忘初心,感慨良多.祝所有的朋友都能幸福,愿望都可以实现,日子越过越好~ Look Back 作为GH加入北 ...
- ARM NEON编程系列1-导论
ARM NEON 编程系列1 - 导论 前言 本系列博文用于介绍ARM CPU下NEON指令优化. 博文github地址:github 相关代码github地址:github NEON历史 ARM处理 ...
- DBA_Oracle DBA常用SQL汇总(概念)
2014-06-20 Created By BaoXinjian
- OAF_EO系列2 - Validation数据校验验证机制(概念)
2014-06-12 Created By BaoXinjian