js+css实现回到顶部按钮(back to top)


Posted in Javascript onMarch 02, 2016

本文实例介绍了js+css实现回到顶部按钮的方法,分享给大家供大家参考,具体内容如下

效果

js+css实现回到顶部按钮(back to top)

html

<p id="back-to-top"><a href="#top"><span></span></a></p>

css

p#back-to-top{
  position:fixed;
  bottom:100px;
  right:80px;
}
p#back-to-top a{
  text-align:center;
  text-decoration:none;
  color:#d1d1d1;
  display:block;
  width:30px;
  /*使用CSS3中的transition属性给跳转链接中的文字添加渐变效果*/
  -moz-transition:color1s;
  -webkit-transition:color1s;
  -o-transition:color1s;
}
p#back-to-top a:hover{
  color:#979797;
}
p#back-to-top a span{
  background:#d1d1d1 url(../images/arrow_up.png) no-repeat center center;
  border-radius:6px;
  display:block;
  height:30px;
  width:30px;
  margin-bottom:5px;
  /*使用CSS3中的transition属性给<span>标签背景颜色添加渐变效果*/
  -moz-transition:background1s;
  -webkit-transition:background1s;
  -o-transition:background1s;
}
#back-to-top a:hover span{
  background:#979797 url(../images/arrow_up.png) no-repeat center center;
}

js

<script type="text/javascript">
$(document).ready(function(){
 //首先将#back-to-top隐藏
 $("#back-to-top").hide();
 //当滚动条的位置处于距顶部600像素以下时,跳转链接出现,否则消失
 $(function () {
  $(window).scroll(function(){
   if ($(window).scrollTop()>600){
    $("#back-to-top").fadeIn(500);
   }else{
    $("#back-to-top").fadeOut(500);
   }
 });
 //当点击跳转链接后,回到页面顶部位置
 $("#back-to-top").click(function(){
  $('body,html').animate({scrollTop:0},500);
   return false;
  });
 });
});
</script>

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
实例:尽可能写友好的Javascript代码
Oct 09 Javascript
jquery select动态加载选择(兼容各种浏览器)
Feb 01 Javascript
javascript制作loading动画效果 loading效果
Jan 14 Javascript
JavaScript基础函数整理汇总
Jan 30 Javascript
JavaScript的jQuery库中function的存在和参数问题
Aug 13 Javascript
使用CamanJS在Web页面上处理图像的技巧
Aug 18 Javascript
AngularJs Managing Service Dependencies详解
Sep 02 Javascript
js获取Get值的方法
Sep 29 Javascript
javascript标准库(js的标准内置对象)总结
May 26 Javascript
微信小程序实现评论功能
Nov 28 Javascript
Layui数据表格 前后端json数据接收的方法
Sep 19 Javascript
原理深度解析Vue的响应式更新比React快
Apr 04 Javascript
Node.js中JavaScript操作MySQL的常用方法整理
Mar 01 #Javascript
通过node-mysql搭建Windows+Node.js+MySQL环境的教程
Mar 01 #Javascript
jquery自定义右键菜单、全选、不连续选择
Mar 01 #Javascript
Node.js的MongoDB驱动Mongoose基本使用教程
Mar 01 #Javascript
详解Wondows下Node.js使用MongoDB的环境配置
Mar 01 #Javascript
安装使用Mongoose配合Node.js操作MongoDB的基础教程
Mar 01 #Javascript
如何使用Bootstrap的modal组件自定义alert,confirm和modal对话框
Mar 01 #Javascript
You might like
php 无限极分类
2008/03/27 PHP
php中JSON的使用方法
2015/04/30 PHP
简述php环境搭建与配置
2016/12/05 PHP
php中this关键字用法分析
2016/12/07 PHP
PHP页面静态化――纯静态与伪静态用法详解
2020/06/05 PHP
用JAVASCRIPT如何给&amp;lt;textarea&amp;gt;&amp;lt;/textarea&amp;gt;赋值
2007/04/20 Javascript
JavaScript对象模型-执行模型
2008/04/28 Javascript
简单实用的js调试logger组件实现代码
2010/11/20 Javascript
script标签属性type与language使用选择
2012/12/02 Javascript
jQuery中height()方法用法实例
2014/12/24 Javascript
jQuery实现TAB选项卡切换特效简单演示
2016/03/04 Javascript
JavaScript的this关键字的理解
2016/06/18 Javascript
JavaScript实现页面无操作倒计时退出
2016/10/22 Javascript
浅谈js函数的多种定义方法与区别
2016/11/29 Javascript
jQuery实现获取隐藏div高度的方法示例
2017/02/09 Javascript
vue中页面跳转拦截器的实现方法
2017/08/23 Javascript
vue 监听屏幕高度的实例
2018/09/05 Javascript
手动下载Chrome并解决puppeteer无法使用问题
2018/11/12 Javascript
在JavaScript中使用严格模式(Strict Mode)
2019/06/13 Javascript
Python中lambda的用法及其与def的区别解析
2014/07/28 Python
python 根据网易云歌曲的ID 直接下载歌曲的实例
2019/08/24 Python
如何使用Python破解ZIP或RAR压缩文件密码
2020/01/09 Python
Python 实现PS滤镜的旋涡特效
2020/12/03 Python
Python实现区域填充的示例代码
2021/02/03 Python
详解CSS3的图层阴影和文字阴影效果使用
2016/06/09 HTML / CSS
美国知名的在线旅游服务网站:Priceline
2016/07/23 全球购物
巴西家用小家电购物网站:Polishop
2016/08/07 全球购物
Michael Kors澳大利亚官网:世界知名的奢侈饰品和成衣设计师
2020/02/13 全球购物
Sunglass Hut巴西网上商店:男女太阳镜
2020/10/04 全球购物
中间件分为哪几类
2016/09/18 面试题
2014年安全生产目标责任书
2014/07/23 职场文书
咖啡店创业计划书范文
2014/09/15 职场文书
元旦晚会开场白
2015/05/29 职场文书
协议书格式模板
2016/03/24 职场文书
Python中的变量与常量
2021/11/11 Python
关于Python使用turtle库画任意图的问题
2022/04/01 Python