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 相关文章推荐
Js 回车换行处理的办法及replace方法应用
Jan 24 Javascript
jquery实现简易的移动端验证表单
Nov 08 Javascript
Node.js操作mysql数据库增删改查
Mar 30 Javascript
js中Number数字数值运算后值不对的解决方法
Feb 28 Javascript
Vue中父组件向子组件通信的方法
Jul 11 Javascript
微信小程序实现点击返回顶层的方法
Jul 12 Javascript
浅谈ES6新增的数组方法和对象
Aug 08 Javascript
JavaScript模拟实现封装的三种方式及写法区别
Oct 27 Javascript
利用vscode调试编译后的js代码详解
May 14 Javascript
微信小程序实现圆形进度条动画
Nov 18 Javascript
ElementUI中el-tree节点的操作的实现
Feb 27 Javascript
React Hook用法示例详解(6个常见hook)
Apr 28 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
smarty巧妙处理iframe中内容页的代码
2012/03/07 PHP
php判断是否为json格式的方法
2014/03/04 PHP
php 时间time与日期date之间的使用详解及区别
2016/11/07 PHP
javascript编程起步(第二课)
2007/01/10 Javascript
JavaScript 构造函数 面相对象学习必备知识
2010/06/09 Javascript
JQuery实现动态添加删除评论的方法
2015/05/18 Javascript
javascript中Date()函数在各浏览器中的显示效果
2015/06/18 Javascript
Jquery检验手机号是否符合规则并根据手机号检测结果将提交按钮设为不同状态
2015/11/26 Javascript
jQuery validate+artdialog+jquery form实现弹出表单思路详解
2016/04/18 Javascript
jQuery Ajax 上传文件处理方式介绍(推荐)
2016/06/30 Javascript
基于AngularJS实现iOS8自带的计算器
2016/09/12 Javascript
jQuery使用siblings获取某元素所有同辈(兄弟姐妹)元素用法示例
2017/01/30 Javascript
Vue.2.0.5过渡效果使用技巧
2017/03/16 Javascript
vue接口请求加密实例
2020/08/11 Javascript
[08:53]DOTA2-DPC中国联赛 正赛 PSG.LGD vs LBZS 选手采访
2021/03/11 DOTA
浅谈python numpy中nonzero()的用法
2018/04/02 Python
python实现写数字文件名的递增保存文件方法
2018/10/25 Python
对numpy中二进制格式的数据存储与读取方法详解
2018/11/01 Python
Python线程之定位与销毁的实现
2019/02/17 Python
Python二叉树的镜像转换实现方法示例
2019/03/06 Python
Python面向对象程序设计类的多态用法详解
2019/04/12 Python
python yield关键词案例测试
2019/10/15 Python
pytorch中tensor张量数据类型的转化方式
2019/12/31 Python
使用canvas对多图片拼合并导出图片的方法
2018/08/28 HTML / CSS
PurCotton全棉时代官网:100%天然棉花生产的生活护理用品
2016/11/18 全球购物
骆驼官方商城:CAMEL
2016/11/22 全球购物
expedia比利时:预订航班+酒店并省钱
2018/07/13 全球购物
波兰运动鞋网上商店:Distance.pl
2020/07/30 全球购物
秋季运动会通讯稿
2014/01/24 职场文书
农村党员对照检查材料
2014/09/24 职场文书
初中信息技术教学计划
2015/01/22 职场文书
航班延误投诉信
2015/07/02 职场文书
女儿满月酒致辞
2015/07/29 职场文书
springboot利用redis、Redisson处理并发问题的操作
2021/06/18 Java/Android
python中super()函数的理解与基本使用
2021/08/30 Python
idea以任意顺序debug多线程程序的具体用法
2021/08/30 Java/Android