jquery实现的动态回到顶部特效代码


Posted in Javascript onOctober 28, 2015

本文实例讲述了jquery实现的动态回到顶部特效代码。分享给大家供大家参考,具体如下:

这款jquery动态回到顶部特效,不是一下子就回到了网页顶部,而是带点缓冲的效果,有动画效果,使用了jQuery插件,这是个非常常用的网页特效,希望大家喜欢哦。

运行效果截图如下:

jquery实现的动态回到顶部特效代码

在线演示地址如下:

具体代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery动态回到顶部特效</title>
</head>
<body>
<style>
#goTopBtn {position: fixed;line-height:36px;width:36px;bottom:35px;height:36px;cursor:pointer;display:none;
background:url(images/back_to_top_white.gif);}
</style>
<br/>
<p style="text-align:center;font-family:Georgia, 'Times New Roman', Times, serif;font-size:24px;font-weight:bold;">***,how are you。
<br/>Just do what you want do!!!</p>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<div id="goTopBtn"></div>
<script type="text/javascript" src="jquery1.3.2.js"></script>
<script type="text/javascript">
 $(window).scroll(function(){
   var sc=$(window).scrollTop();
   var rwidth=$(window).width()
   if(sc>0){
    $("#goTopBtn").css("display","block");
    $("#goTopBtn").css("left",(rwidth-36)+"px")
   }else{
   $("#goTopBtn").css("display","none");
   }
 })
 $("#goTopBtn").click(function(){
   var sc=$(window).scrollTop();
   $('body,html').animate({scrollTop:0},500);
 })
</script>
</body>
</html>

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
学习jquery必备 api中英文对照的chm手册 下载
May 03 Javascript
jQuery 技巧大全(新手入门篇)
May 12 Javascript
js构建二叉树进行数值数组的去重与优化详解
Mar 26 Javascript
JS模拟实现哈希表及应用详解
May 04 Javascript
vue实现个人信息查看和密码修改功能
May 06 Javascript
Bootstrap 模态框自定义点击和关闭事件详解
Aug 10 Javascript
微信小程序使用swiper组件实现类3D轮播图
Aug 29 Javascript
从组件封装看Vue的作用域插槽的实现
Feb 12 Javascript
使用p5.js实现动态GIF图片临摹重现
Oct 23 Javascript
基于vue实现简易打地鼠游戏
Aug 21 Javascript
如何区分vue中的v-show 与 v-if
Sep 08 Javascript
JavaScript位置参数实现原理及过程解析
Sep 14 Javascript
JavaScript如何调试有哪些建议和技巧附五款有用的调试工具
Oct 28 #Javascript
jQuery实现鼠标滑过链接控制图片的滑动展开与隐藏效果
Oct 28 #Javascript
使用Chart.js图表库制作漂亮的响应式表单
Oct 28 #Javascript
jQuery+PHP+MySQL二级联动下拉菜单实例讲解
Oct 27 #Javascript
jQuery结合CSS制作动态的下拉菜单
Oct 27 #Javascript
jquery实现的V字形显示效果代码
Oct 27 #Javascript
JS基于Ajax实现的网页Loading效果代码
Oct 27 #Javascript
You might like
PHP如何根据文件头检测文件类型实例代码
2018/10/14 PHP
EasyUI的treegrid组件动态加载数据问题的解决办法
2011/12/11 Javascript
jquery中get和post的简单实例
2014/02/04 Javascript
JavaScript onkeypress事件入门实例(按下或按住一个键盘按键)
2014/10/17 Javascript
解析Node.js基于模块和包的代码部署方式
2016/02/16 Javascript
jQuery Mobile 和 Kendo UI 的比较
2016/05/05 Javascript
实现easyui的datagrid导出为excel的示例代码
2016/11/10 Javascript
js从输入框读取内容,比较两个数字的大小方法
2017/03/13 Javascript
AngularJS遍历获取数组元素的方法示例
2017/11/11 Javascript
vue读取本地的excel文件并显示在网页上方法示例
2019/05/29 Javascript
微信小程序实现watch监听
2020/06/04 Javascript
vue中的.$mount('#app')手动挂载操作
2020/09/02 Javascript
Element-ui 自带的两种远程搜索(模糊查询)用法讲解
2021/01/29 Javascript
Python映射拆分操作符用法实例
2015/05/19 Python
python3中str(字符串)的使用教程
2017/03/23 Python
python基础教程项目四之新闻聚合
2018/04/02 Python
python Spyder界面无法打开的解决方法
2018/04/27 Python
对Python中gensim库word2vec的使用详解
2018/05/08 Python
python3爬取数据至mysql的方法
2018/06/26 Python
Python利用pandas处理Excel数据的应用详解
2019/06/18 Python
浅谈pyqt5在QMainWindow中布局的问题
2019/06/21 Python
使用python将最新的测试报告以附件的形式发到指定邮箱
2019/09/20 Python
Python如何把Spark数据写入ElasticSearch
2020/04/18 Python
python实现无边框进度条的实例代码
2020/12/30 Python
CSS3实现swap交换动画
2016/01/19 HTML / CSS
爱游人:Travelliker
2017/09/05 全球购物
国家地理在线商店:Shop National Geographic
2018/06/30 全球购物
什么叫应用程序域?什么是受管制的代码?什么是强类型系统?什么是装箱和拆箱?
2016/08/13 面试题
农救科工作职责
2013/11/27 职场文书
自行车租赁公司创业计划书
2014/01/28 职场文书
二年级评语大全
2014/04/23 职场文书
机械电子工程专业自荐书
2014/06/10 职场文书
工作保证书怎么写
2015/02/28 职场文书
2015年感恩母亲节的演讲稿
2015/03/18 职场文书
快速学习Oracle触发器和游标
2021/06/30 Oracle
详细聊一聊mysql的树形结构存储以及查询
2022/04/05 MySQL