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 相关文章推荐
基于JQuery制作的产品广告效果
Dec 08 Javascript
关于jQuery中的each方法(jQuery到底干了什么)
Mar 05 Javascript
jquery trigger伪造a标签的click事件取代window.open方法
Jun 23 Javascript
使用JavaScript开发IE浏览器本地插件实例
Feb 18 Javascript
jquery实现弹出层登录和全屏层注册特效
Aug 28 Javascript
Jquery实现简单的轮播效果(代码管用)
Mar 14 Javascript
JavaScript的继承实现小结
May 07 Javascript
JavaScript中利用Array filter() 方法压缩稀疏数组
Feb 24 Javascript
JavaScript中引用vs复制示例详析
Dec 06 Javascript
vue 中固定导航栏的实例代码
Nov 01 Javascript
vue中watch和computed为什么能监听到数据的改变以及不同之处
Dec 27 Javascript
详解element上传组件before-remove钩子问题解决
Apr 08 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
Yii2使用自带的UploadedFile实现的文件上传
2016/06/20 PHP
总结PHP代码规范、流程规范、git规范
2018/06/18 PHP
取键盘键位ASCII码的网页
2007/07/30 Javascript
JavaScript Distilled 基础知识与函数
2010/04/07 Javascript
js使用for循环与innerHTML获取选中tr下td值
2014/09/26 Javascript
jquery获取radio值(单选组radio)
2014/10/16 Javascript
分享一个常用的javascript静态类
2014/12/31 Javascript
js中javascript:void(0) 真正含义
2020/11/05 Javascript
Javascript刷新窗口方法小结
2015/10/21 Javascript
利用JS实现数字增长
2016/07/28 Javascript
利用js查找数组中指定元素并返回该元素的所有索引示例
2017/03/29 Javascript
使用jQuery.Pin垂直滚动时固定导航
2017/05/24 jQuery
Vue在页面右上角实现可悬浮/隐藏的系统菜单
2018/05/04 Javascript
Vue导出页面为PDF格式的实现思路
2018/07/31 Javascript
基于vue-router 多级路由redirect 重定向的问题
2018/09/03 Javascript
vue+element项目中过滤输入框特殊字符小结
2019/08/07 Javascript
基于Vue CSR的微前端实现方案实践
2020/05/27 Javascript
vue-cli中实现响应式布局的方法
2021/03/02 Vue.js
linux系统使用python获取内存使用信息脚本分享
2014/01/15 Python
python shell根据ip获取主机名代码示例
2017/11/25 Python
python os用法总结
2018/06/08 Python
python中的常量和变量代码详解
2018/07/25 Python
python3调用百度翻译API实现实时翻译
2018/08/16 Python
对Python3+gdal 读取tiff格式数据的实例讲解
2018/12/04 Python
在Pytorch中计算卷积方法的区别详解(conv2d的区别)
2020/01/03 Python
python pprint模块中print()和pprint()两者的区别
2020/02/10 Python
Tensorflow安装问题: Could not find a version that satisfies the requirement tensorflow
2020/04/20 Python
python绘制分布折线图的示例
2020/09/24 Python
德国2018年度最佳在线药房:Bodfeld Apotheke
2019/11/04 全球购物
凌阳科技股份有限公司C++程序员面试题笔试题
2014/11/20 面试题
遇到的Mysql的面试题
2014/06/29 面试题
教学评估实施方案
2014/03/16 职场文书
2015年施工员工作总结范文
2015/04/20 职场文书
跳高加油稿
2015/07/21 职场文书
Python自动化爬取天眼查数据的实现
2021/06/15 Python
python数字图像处理之图像自动阈值分割示例
2022/06/28 Python