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 相关文章推荐
Javascript优化技巧(文件瘦身篇)
Jan 28 Javascript
Jquery仿淘宝京东多条件筛选可自行结合ajax加载示例
Aug 28 Javascript
jQuery 事件的命名空间简单了解
Nov 22 Javascript
js从Cookies里面取值的简单实现
Jun 30 Javascript
jQuery 处理页面的事件详解
Jan 20 Javascript
基于jquery实现的自动补全功能
Mar 12 Javascript
JS如何判断是否为ie浏览器的方法(包括IE10、IE11在内)
Dec 13 Javascript
JS 学习总结之正则表达式的懒惰性和贪婪性
Jul 03 Javascript
jQuery UI Draggable + Sortable 结合使用(实例讲解)
Sep 07 jQuery
Vue 中使用vue2-highcharts实现曲线数据展示的方法
Mar 05 Javascript
Vue实现手机扫描二维码预览页面效果
May 28 Javascript
详解TypeScript的基础类型
Feb 18 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上传大文件设置方法
2016/04/14 PHP
js 替换
2008/02/19 Javascript
js 事件截取enter按键页面提交事件示例代码
2014/03/04 Javascript
javascript包装对象实例分析
2015/03/27 Javascript
原生JS实现平滑回到顶部组件
2016/03/16 Javascript
Extjs实现下拉菜单效果
2016/04/01 Javascript
JS未跨域操作iframe里的DOM
2016/06/01 Javascript
微信小程序 require机制详解及实例代码
2016/12/14 Javascript
微信小程序 二维码canvas绘制实例详解
2017/01/06 Javascript
JavaScript基础进阶之数组方法总结(推荐)
2017/09/04 Javascript
vue 项目如何引入微信sdk接口的方法
2017/12/18 Javascript
webpack打包并将文件加载到指定的位置方法
2018/02/22 Javascript
解决bootstrap中下拉菜单点击后不关闭的问题
2018/08/10 Javascript
Nuxt.js实战和配置详解
2019/08/05 Javascript
微信小程序实现抖音播放效果的实例代码
2020/04/11 Javascript
JavaScript如何判断对象有某属性
2020/07/03 Javascript
python绘图库Matplotlib的安装
2014/07/03 Python
详解Python中的变量及其命名和打印
2016/03/11 Python
Python中利用xpath解析HTML的方法
2018/05/14 Python
我们为什么要减少Python中循环的使用
2019/07/10 Python
python同步windows和linux文件
2019/08/29 Python
关于django 1.10 CSRF验证失败的解决方法
2019/08/31 Python
Python使用socketServer包搭建简易服务器过程详解
2020/06/12 Python
python使用建议与技巧分享(一)
2020/08/17 Python
详解H5本地储存Web Storage
2017/07/03 HTML / CSS
Doyoueven官网:澳大利亚健身服饰和配饰品牌
2019/03/24 全球购物
JoJo Maman Bébé爱尔兰官网:英国最受欢迎的精品母婴品牌
2020/12/20 全球购物
链表面试题-一个链表的结点结构
2015/05/04 面试题
总经理岗位职责
2013/11/09 职场文书
自我鉴定范文
2013/11/10 职场文书
ktv中秋节活动方案
2014/01/30 职场文书
给孩子的新年寄语
2014/04/08 职场文书
广告学专业毕业生自荐信
2014/05/28 职场文书
辞旧迎新演讲稿
2014/09/15 职场文书
小学数学教学反思范文
2016/02/16 职场文书
Java SSM配置文件案例详解
2021/08/30 Java/Android