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中的作用域scope介绍
Dec 28 Javascript
javascript笔记 String类replace函数的一些事
Sep 22 Javascript
toggle一个div显示或隐藏且可扩展成自定义下拉框
Sep 12 Javascript
JS之Date对象和获取系统当前时间详解
Jan 13 Javascript
基于jquery实现动态竖向柱状条特效
Feb 12 Javascript
详解基于Vue+Koa的pm2配置
Oct 24 Javascript
javaScript 连接打印机,打印小票的实例
Dec 29 Javascript
ExtJs使用自定义插件动态保存表头配置(隐藏或显示)
Sep 25 Javascript
JavaScript函数式编程(Functional Programming)组合函数(Composition)用法分析
May 22 Javascript
JS使用for in有序获取对象数据
May 19 Javascript
微信小程序之滑动页面隐藏和显示组件功能的实现代码
Jun 19 Javascript
React 并发功能体验(前端的并发模式)
Jul 01 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 5.5 新特性
2013/07/02 PHP
PHP加密解密函数详解
2015/10/28 PHP
Yii多表联合查询操作详解
2016/06/02 PHP
php语言注释,单行注释和多行注释
2018/01/21 PHP
PHP htmlentities()函数用法讲解
2019/02/25 PHP
laravel-admin 管理平台获取当前登陆用户信息的例子
2019/10/08 PHP
javascript右下角弹层及自动隐藏(自己编写)
2013/11/20 Javascript
设置jsf的选择框h:selectOneMenu为不可编辑状态的方法
2014/01/07 Javascript
jQuery 鼠标经过(hover)事件的延时处理示例
2014/04/14 Javascript
jquery 获取 outerHtml 包含当前节点本身的代码
2014/10/30 Javascript
Jquery判断radio、selelct、checkbox是否选中及获取选中值方法总结
2015/04/15 Javascript
用svg制作富有动态的tooltip
2015/07/17 Javascript
Angular通过angular-cli来搭建web前端项目的方法
2017/07/27 Javascript
js 显示日期时间的实例(时间过一秒加1)
2017/10/25 Javascript
vue-router路由懒加载和权限控制详解
2017/12/13 Javascript
详解tween.js 中文使用指南
2018/01/05 Javascript
js调用设备摄像头的方法
2018/07/19 Javascript
vueJs实现DOM加载完之后自动下拉到底部的实例代码
2018/08/31 Javascript
微信小程序如何使用canvas二维码保存至手机相册
2019/07/15 Javascript
vue draggable resizable 实现可拖拽缩放的组件功能
2019/07/15 Javascript
nest.js 使用express需要提供多个静态目录的操作方法
2019/10/24 Javascript
[01:24:34]2014 DOTA2华西杯精英邀请赛5 24 DK VS LGD
2014/05/25 DOTA
Python的Flask框架及Nginx实现静态文件访问限制功能
2016/06/27 Python
浅谈用VSCode写python的正确姿势
2017/12/16 Python
python3.4控制用户输入与输出的方法
2018/10/17 Python
python中hasattr()、getattr()、setattr()函数的使用
2019/08/16 Python
使用OpenCV-python3实现滑动条更新图像的Canny边缘检测功能
2019/12/12 Python
python实现斗地主分牌洗牌
2020/06/22 Python
HTML5利用约束验证API来检查表单的输入数据的代码实例
2016/12/20 HTML / CSS
Marriott国际:万豪国际酒店查询预订
2017/09/25 全球购物
班班通校本培训方案
2014/03/12 职场文书
解决golang在import自己的包报错的问题
2021/04/29 Golang
LayUI+Shiro实现动态菜单并记住菜单收展的示例
2021/05/06 Javascript
Python中zipfile压缩包模块的使用
2021/05/14 Python
Java面试题冲刺第十九天--数据库(4)
2021/08/07 Java/Android
英镑符号 £
2022/02/17 杂记