使用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 相关文章推荐
使用js操作css实现js改变背景图片示例
Mar 10 Javascript
jQuery实现企业网站横幅焦点图切换功能实例
Apr 30 Javascript
解决js页面滚动效果scrollTop在FireFox与Chrome浏览器间的兼容问题的方法
Dec 03 Javascript
JavaScript的设计模式经典之代理模式
Feb 24 Javascript
聊一聊Vue.js过渡效果
Sep 07 Javascript
浅谈AngularJs指令之scope属性详解
Oct 24 Javascript
react-router4 嵌套路由的使用方法
Jul 24 Javascript
jQuery结合jQuery.cookie.js插件实现换肤功能示例
Oct 14 jQuery
vue项目引入Iconfont图标库的教程图解
Oct 24 Javascript
通过实例了解js函数中参数的传递
Jun 15 Javascript
微信小程序如何实现五星评价功能
Oct 15 Javascript
JS严格模式原理与用法实例分析
Apr 27 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
基于CI框架的微信网页授权库示例
2016/11/25 PHP
PHP 二维关联数组根据其中一个字段排序(推荐)
2017/04/04 PHP
详解php语言最牛掰的Laravel框架
2017/11/20 PHP
php精度计算的问题解析
2019/06/21 PHP
使用javascript访问XML数据的实例
2006/12/27 Javascript
改变文件域的样式实现思路同时兼容ie、firefox
2013/10/23 Javascript
js完美的div拖拽实例代码
2014/01/22 Javascript
NodeJs中的VM模块详解
2015/05/06 NodeJs
js中substring和substr两者区别和使用方法
2015/11/09 Javascript
跟我学习javascript的函数和函数表达式
2015/11/16 Javascript
JavaScript的Ext JS框架中的GridPanel组件使用指南
2016/05/21 Javascript
JS实现禁止鼠标右键的功能
2016/10/15 Javascript
vuejs指令详解
2017/02/07 Javascript
详解vue2.0脚手架的webpack 配置文件分析
2017/05/27 Javascript
详解webpack多页面配置记录
2018/01/22 Javascript
详解vue-cli下ESlint 配置说明
2018/09/03 Javascript
详解js中的几种常用设计模式
2020/07/16 Javascript
[03:59]5分钟带你了解什么是DOTA2(第二期)
2017/02/07 DOTA
python实现bucket排序算法实例分析
2015/05/04 Python
在win和Linux系统中python命令行运行的不同
2016/07/03 Python
利用Hyperic调用Python实现进程守护
2018/01/02 Python
Python学习之Anaconda的使用与配置方法
2018/01/04 Python
基于wxPython的GUI实现输入对话框(1)
2019/02/27 Python
pyQT5 实现窗体之间传值的示例
2019/06/20 Python
Python logging日志模块 配置文件方式
2020/07/12 Python
thinkphp5 路由分发原理
2021/03/18 PHP
css3 仿写阿里云水纹效果的示例代码
2018/02/10 HTML / CSS
英国殿堂级有机护肤品牌:Rodial
2017/04/17 全球购物
建筑工程专业学生的自我评价
2013/12/25 职场文书
三八妇女节演讲稿
2014/05/27 职场文书
小学社会实践活动总结
2014/07/03 职场文书
2016高一新生军训心得体会
2016/01/11 职场文书
《坐井观天》教学反思
2016/02/18 职场文书
工人先锋号事迹材料(2016精选版)
2016/03/01 职场文书
关于PostgreSQL JSONB的匹配和交集问题
2021/09/14 PostgreSQL
Golang 对es的操作实例
2022/04/20 Golang