使用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 相关文章推荐
jquery实现炫酷的叠加层自动切换特效
Feb 01 Javascript
jQuery插件dataTables添加序号列的方法
Jul 06 Javascript
Bootstrap3制作搜索框样式的方法
Jul 11 Javascript
JS判断来路是否是百度等搜索索引进行弹窗或自动跳转的实现代码
Oct 09 Javascript
Bootstrap CSS组件之按钮组(btn-group)
Dec 17 Javascript
jQuery实现的无缝广告图片左右滚动功能详解
Dec 24 Javascript
react性能优化达到最大化的方法 immutable.js使用的必要性
Mar 09 Javascript
angular $watch 一个变量的变化(实例讲解)
Aug 02 Javascript
JS实现自定义状态栏动画文字效果示例
Oct 12 Javascript
Node.js + express实现上传大文件的方法分析【图片、文本文件】
Mar 14 Javascript
原生js实现商品筛选功能
Oct 28 Javascript
mpvue 项目初始化及实现授权登录的实现方法
Jul 20 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 验证图片生成函数
2009/05/21 PHP
10条PHP高级技巧[修正版]
2011/08/02 PHP
thinkphp验证码的实现(form、ajax实现验证)
2016/07/28 PHP
asp.net和php的区别点总结
2019/10/10 PHP
js常用函数 不错
2006/09/08 Javascript
javascript 一个自定义长度的文本自动换行的函数
2007/08/19 Javascript
jquery1.4 教程二 ajax方法的改进
2010/02/25 Javascript
js使用html()或text()方法获取设置p标签的显示的值
2014/08/01 Javascript
Javascript中拼接大量字符串的方法
2015/02/05 Javascript
js小数运算出现多位小数如何解决
2015/10/08 Javascript
基于jquery实现左右按钮点击的图片切换效果
2021/01/27 Javascript
javascript DOM的详解及实例代码
2017/03/06 Javascript
微信小程序中form 表单提交和取值实例详解
2017/04/20 Javascript
jquery鼠标悬停导航下划线滑出效果
2017/09/29 jQuery
vue中使用echarts制作圆环图的实例代码
2018/07/27 Javascript
全面了解JavaScript的作用域链
2019/04/03 Javascript
详解jQuery中的prop()使用方法
2020/01/05 jQuery
Vue实现一种简单的无限循环滚动动画的示例
2021/01/10 Vue.js
聊聊vue 中的v-on参数问题
2021/01/29 Vue.js
Python使用cookielib模块操作cookie的实例教程
2016/07/12 Python
详解python如何调用C/C++底层库与互相传值
2016/08/10 Python
python购物车程序简单代码
2018/04/18 Python
Pandas过滤dataframe中包含特定字符串的数据方法
2018/11/07 Python
Python实现FM算法解析
2019/06/18 Python
使用APScheduler3.0.1 实现定时任务的方法
2019/07/22 Python
python opencv实现证件照换底功能
2019/08/19 Python
python 使用pygame工具包实现贪吃蛇游戏(多彩版)
2019/10/30 Python
Python 实现顺序高斯消元法示例
2019/12/09 Python
pandas使用之宽表变窄表的实现
2020/04/12 Python
Pytest如何使用skip跳过执行测试
2020/08/13 Python
纯CSS3发光分享按钮的实现教程
2014/09/06 HTML / CSS
Zooplus罗马尼亚:宠物食品和配件
2019/11/02 全球购物
《狮子和兔子》教学反思
2014/03/02 职场文书
党性心得体会
2014/09/03 职场文书
陪护人员误工证明
2015/06/24 职场文书
SQLServer中exists和except用法介绍
2021/12/04 SQL Server