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下阻止表单重复提交、防刷新、防后退
Aug 17 Javascript
JavaScript之编码规范 推荐
May 23 Javascript
JS生成随机字符串的多种方法
Jun 10 Javascript
jQuery制作简单柱状图实例
Jan 28 Javascript
Javascript实现Web颜色值转换
Feb 05 Javascript
js实现登陆遮罩效果的方法
Jul 28 Javascript
jQuery EasyUI 右键菜单--关闭标签/选项卡的简单实例
Oct 10 Javascript
Angular4绑定html内容出现警告的处理方法
Nov 03 Javascript
JS实现生成由字母与数字组合的随机字符串功能详解
May 25 Javascript
微信小程序实现人脸识别
May 25 Javascript
如何优雅的在一台vps(云主机)上面部署vue+mongodb+express项目
Jan 20 Javascript
jQuery实现飞机大战小游戏
Jul 05 jQuery
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依赖倒置(Dependency Injection)代码实例
2014/10/11 PHP
php实现每日签到功能
2018/11/29 PHP
Yii框架小部件(Widgets)用法实例详解
2020/05/15 PHP
Yii 框架入口脚本示例分析
2020/05/19 PHP
用javascript编写的第一人称射击游戏
2007/02/25 Javascript
excel操作之Add Data to a Spreadsheet Cell
2007/06/12 Javascript
jQuery 获取对象 定位子对象
2010/05/31 Javascript
多种方法实现JS动态添加事件
2013/11/01 Javascript
页面装载js及性能分析方法介绍
2014/03/21 Javascript
jquery实现类似淘宝星星评分功能实例
2014/09/12 Javascript
在JavaScript应用中使用RequireJS来实现延迟加载
2015/07/01 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(下)
2015/10/28 Javascript
JavaScript BASE64算法实现(完美解决中文乱码)
2017/01/10 Javascript
js实现返回顶部效果
2017/03/10 Javascript
jQuery插件FusionCharts绘制的2D帕累托图效果示例【附demo源码】
2017/03/28 jQuery
Vue Element使用icon图标教程详解(第三方)
2018/02/07 Javascript
详解nodejs http请求相关总结
2019/03/31 NodeJs
js 压缩图片的示例(只缩小体积,不更改图片尺寸)
2020/10/21 Javascript
[06:24]DOTA2亚洲邀请赛小组赛第三日 TOP10精彩集锦
2015/02/01 DOTA
在Python中实现贪婪排名算法的教程
2015/04/17 Python
解决Python pandas plot输出图形中显示中文乱码问题
2018/12/12 Python
使用Python将字符串转换为格式化的日期时间字符串
2019/09/01 Python
基于pygame实现童年掌机打砖块游戏
2020/02/25 Python
PyQt5 界面显示无响应的实现
2020/03/26 Python
Tensorflow tensor 数学运算和逻辑运算方式
2020/06/30 Python
Django mysqlclient安装和使用详解
2020/09/17 Python
用python对excel进行操作(读,写,修改)
2020/12/25 Python
使用HTML5捕捉音频与视频信息概述及实例
2018/08/22 HTML / CSS
英国花园、DIY、电器和家居用品商店:Robert Dyas
2019/03/18 全球购物
师范学院美术系毕业生自我鉴定
2014/01/29 职场文书
大学秋游活动方案
2014/02/11 职场文书
《逃家小兔》教学反思
2014/02/23 职场文书
2015医德医风个人工作总结
2015/04/02 职场文书
2015年学校政教工作总结
2015/07/20 职场文书
婚礼上证婚人致辞
2015/07/28 职场文书
python 如何将两个实数矩阵合并为一个复数矩阵
2021/05/19 Python