使用jQuery实现返回顶部


Posted in Javascript onJanuary 26, 2015

使用jQuery实现。所用图片:

使用jQuery实现返回顶部

1、尝试滚动 此页面到底部即可出现go2top按钮。
2、go2top-inner暂未使用。
HTML&JS定义:

<a id="go2top" class="go2top" href="#header"><span class="go2top-inner"></span></a>

<script type="text/javascript">

$(function(){

    $('#go2top').click(function(){

        $("html,body").animate({scrollTop:0},200);

        return false;

    });

    $(window).scroll(function(){

        var obj=$('#go2top');

        if(obj.offset().top>900){

            obj.show();

        }else{

            obj.hide();

        }

    });

});

</script>

CSS定义

.go2top {

    background: url("http://images.cnitblog.com/blog/84698/201303/28125209-67653841b1114531a2a1e6db63315d63.png") no-repeat scroll left top transparent;

    bottom: 65px;

    color: #444444;

    display: none;

    height: 50px;

    margin-left: 510px;

    position: fixed;

    right: 160px;

    text-align: center;

    width: 50px;

}

.go2top:hover {

    background-position: -50px top;

}

试试看,是不是有了返回顶部了,非常方便实用的功能,希望大家能够喜欢。

Javascript 相关文章推荐
Whatever:hover 无需javascript让IE支持丰富伪类
Jun 29 Javascript
JS可以控制样式的名称写法一览
Jan 16 Javascript
微信支付如何实现内置浏览器的H5页面支付
Sep 25 Javascript
AngularJS HTML DOM详解及示例代码
Aug 17 Javascript
@ResponseBody 和 @RequestBody 注解的区别
Mar 08 Javascript
javascript 产生随机数的几种方法总结
Sep 26 Javascript
vue页面跳转后返回原页面初始位置方法
Feb 11 Javascript
babel的使用及安装配置教程
Feb 22 Javascript
详解Vue-cli3.X使用px2rem遇到的问题
Aug 09 Javascript
JavaScript页面加载事件实例讲解
Sep 01 Javascript
JavaScript实现随机点名小程序
Oct 29 Javascript
微信小程序中target和currentTarget的区别小结
Nov 06 Javascript
SyntaxHighlighter 3.0.83使用笔记
Jan 26 #Javascript
AngularJS iframe跨域打开内容时报错误的解决办法
Jan 26 #Javascript
JavaScript事件委托用法分析
Jan 24 #Javascript
jQuery统计上传文件大小的方法
Jan 24 #Javascript
限制上传文件大小和格式的jQuery插件实例
Jan 24 #Javascript
jQuery将所有被选中的checkbox某个属性值连接成字符串的方法
Jan 24 #Javascript
使用jQuery实现input数值增量和减量的方法
Jan 24 #Javascript
You might like
PHP+DBM的同学录程序(2)
2006/10/09 PHP
简单的页面缓冲技术
2006/10/09 PHP
windows下配置php5.5开发环境及开发扩展
2014/12/25 PHP
PHP5.3以上版本安装ZendOptimizer扩展
2015/03/27 PHP
Zend Framework校验器Zend_Validate用法详解
2016/12/09 PHP
PHP中类与对象功能、用法实例解读
2020/03/27 PHP
Extjs学习笔记之一 初识Extjs之MessageBox
2010/01/07 Javascript
jquery json 实例代码
2010/12/02 Javascript
JavaScript数组随机排列实现随机洗牌功能
2015/03/19 Javascript
jquery 遍历数组 each 方法详解
2016/05/25 Javascript
jQuery实现 上升、下降、删除、添加一行代码
2017/03/06 Javascript
JS鼠标3次点击事件实现代码及扩展思路
2017/09/12 Javascript
浅谈vue中数据双向绑定的实现原理
2017/09/14 Javascript
create-react-app 修改为多入口编译的方法
2018/08/01 Javascript
AngularJS上传文件的示例代码
2018/11/10 Javascript
layui 上传文件_批量导入数据UI的方法
2019/09/23 Javascript
Vue项目页面跳转时浏览器窗口上方显示进度条功能
2020/03/26 Javascript
[31:55]完美世界DOTA2联赛循环赛 IO vs GXR BO2第一场 11.04
2020/11/05 DOTA
在Python程序中操作文件之isatty()方法的使用教程
2015/05/24 Python
Python 类的继承实例详解
2017/03/25 Python
一个简单的python爬虫程序 爬取豆瓣热度Top100以内的电影信息
2018/04/17 Python
python抓取网站的图片并下载到本地的方法
2018/05/22 Python
Python实现定期检查源目录与备份目录的差异并进行备份功能示例
2019/02/27 Python
python学习——内置函数、数据结构、标准库的技巧(推荐)
2019/04/18 Python
Python数据可视化处理库PyEcharts柱状图,饼图,线性图,词云图常用实例详解
2020/02/10 Python
美国传奇滑手Paul Rodriguez创办的街头滑板品牌:Primitive Skateboarding
2019/10/29 全球购物
JD Sports西班牙:英国领先的运动服装公司
2020/01/06 全球购物
介绍一下Python下range()函数的用法
2013/11/07 面试题
运动会解说词50字
2014/01/18 职场文书
语文教学感言
2014/02/06 职场文书
后勤主管岗位职责
2014/03/01 职场文书
小学运动会前导词
2015/07/20 职场文书
谢师宴学生答谢词
2015/09/30 职场文书
2015年社区反邪教工作总结
2015/10/14 职场文书
2016会计专业自荐信范文
2016/01/28 职场文书
Win11如何修改dns?Win11修改dns图文教程
2022/01/18 数码科技