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中IE浏览器不支持NEW DATE()带参数的解决方法
Mar 01 Javascript
使用Java实现简单的server/client回显功能的方法介绍
May 03 Javascript
window.location.hash知识汇总
Nov 09 Javascript
js动态获取子复选项并设计全选及提交的实现方法
Jun 24 Javascript
移动端 一个简单易懂的弹出框
Jul 06 Javascript
二维码图片生成器QRCode.js简单介绍
Aug 18 Javascript
vue2.0s中eventBus实现兄弟组件通信的示例代码
Oct 25 Javascript
vue组件父子间通信之综合练习(聊天室)
Nov 07 Javascript
解决Jstree 选中父节点时被禁用的子节点也会选中的问题
Dec 27 Javascript
bootstrap select2插件用ajax来获取和显示数据的实例
Aug 09 Javascript
JavaScript键盘事件响应顺序详解
Sep 30 Javascript
Vue实现图书管理案例
Jan 20 Vue.js
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面向对象学习笔记之一 基础概念
2012/10/06 PHP
PHP获取一年有几周以及每周开始日期和结束日期
2015/08/06 PHP
php生成复杂验证码(倾斜,正弦干扰线,黏贴,旋转)
2018/03/12 PHP
5 cool javascript apps
2007/03/24 Javascript
基于Jquery的将DropDownlist的选中值赋给label的实现代码
2011/05/06 Javascript
input输入框的自动匹配(原生代码)
2013/03/19 Javascript
Nodejs全栈框架StrongLoop推荐
2014/11/09 NodeJs
js实现带关闭按钮始终显示在网页最底部工具条的方法
2015/03/02 Javascript
js实现同一个页面多个渐变效果的方法
2015/04/10 Javascript
使用纯javascript实现经典扫雷游戏
2015/04/23 Javascript
学习vue.js表单控件绑定操作
2016/12/05 Javascript
解决vue keep-alive 数据更新的问题
2018/09/21 Javascript
vue使用laydate时间插件的方法
2018/11/14 Javascript
微信小程序开发之点击按钮退出小程序的实现方法
2019/04/26 Javascript
解决layui数据表格Date日期格式的回显Object的问题
2019/09/19 Javascript
Vuex中实现数据状态查询与更改
2019/11/08 Javascript
详尽讲述用Python的Django框架测试驱动开发的教程
2015/04/22 Python
Python读写ini文件的方法
2015/05/28 Python
详解Python异常处理中的Finally else的功能
2017/12/29 Python
浅析python打包工具distutils、setuptools
2018/04/20 Python
对numpy中的transpose和swapaxes函数详解
2018/08/02 Python
浅谈pycharm下找不到sqlalchemy的问题
2018/12/03 Python
Python获取航线信息并且制作成图的讲解
2019/01/03 Python
python全栈要学什么 python全栈学习路线
2019/06/28 Python
python 6.7 编写printTable()函数表格打印(完整代码)
2020/03/25 Python
不到20行实现Python代码即可制作精美证件照
2020/04/24 Python
django 解决model中类写不到数据库中,数据库无此字段的问题
2020/05/20 Python
vscode+PyQt5安装详解步骤
2020/08/12 Python
Python模拟登录requests.Session应用详解
2020/11/17 Python
Html5 FileReader实现即时上传图片功能实例代码
2014/09/01 HTML / CSS
C++是不是类型安全的
2014/02/18 面试题
实习教师个人的自我评价
2013/11/08 职场文书
写给妈妈的道歉信
2014/01/11 职场文书
违反校纪校规检讨书
2014/02/15 职场文书
务虚会发言材料
2014/12/25 职场文书
人生感悟经典句子
2019/08/20 职场文书