jquery返回页面顶部
1、此博文图片样式引用腾讯网站,效果如下:

2、样式设置:
#toTop {
/*选中的背景图片的大小*/
width: 54px;
height: 54px;
display: none;/*刚开始不显示*/
position: fixed;
right: 25px;/*距离右边大小值*/
bottom: 45px;/*距离底部大小值*/
/*选定图片区域*/
background-image: url(images/qqbg_1.5.5.png);
background-repeat: no-repeat;
background-position: -700px -110px;
opacity: 0.3; /*透明度*/
}
#toTop:hover {
opacity: ;/*悬停时不透明*/
filter: alpha(opacity = );
}
3、JS代码:
<a href="#" target="_self" id="toTop" title="返回顶部" onclick="window.scrollTo(0,0);return false"></a>
<script type = "text/javascript">
function toTopHide(){
$(document).scrollTop()>?
$("#toTop").show()
:$("#toTop").hide();
}
$(window).scroll(function(){toTopHide()});
</script>
jquery返回页面顶部的更多相关文章
- 代码: 返回页面顶部 jquery
jquery代码: 返回页面顶部 <script type="text/javascript" src="http://cdn.bootcss.com/jquery ...
- jquery返回滚动条顶部
var $view = $('html,body'),$backTop = $('#backTop'), $backTop.on('click',function(){ $view.animate({ ...
- react-router(v4) 路由跳转后返回页面顶部问题
遇到的问题 由A页面跳转到B页面,B页面停留在A页面的位置,没有返回到顶部. 问题分析 首先分析下出现此问题的原因: 在项目中使用的是 hashHistory,它是建立在 history 之上的,当路 ...
- HTML5商城开发五 实现返回页面顶部
本文内容主要是网上参考收集,介绍四种简单的返回页面顶部代码,可以使用简单的HTML锚标记,也可使用Javascript Scroll函数动态返回等等. 一.使用锚标记返回页面顶部 使用HTML锚标记最 ...
- jquery实现返回页面顶部功能。
<p id="back-to-top"> <span></span> </p> <script type="text ...
- js网页返回页面顶部的小方法
咳咳,在网页出现滚动条的时候,许多网站会在右下角出现一个图标,点击可以回到页面顶部 本文就记录下js实现代码: 1.在html页面body添加dom元素 <img src="toTop ...
- 【jQuery】页面顶部显示的进度条效果
<!Doctype html> <html> <head> <title>页面顶部显示的进度条效果</title> <meta htt ...
- 解决点击a标签返回页面顶部的问题
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- (转)解决点击a标签返回页面顶部的问题
本文转载至http://www.cnblogs.com/chenluomenggongzi/p/5950670.html 1 <!DOCTYPE html> 2 <html lang ...
随机推荐
- luogu P1081 开车旅行
传送门 这题的暴力做法显然是照题意模拟,从每个点出发暴力跳.而这个暴跳显然是可以倍增优化的,就是预处理出从每个点,(一开始是A)往后跳\(2^k\)步,能到哪里,以及\(A\)和\(B\)的路程,然后 ...
- 2017CCPC秦皇岛 C题Crusaders Quest&&ZOJ3983【模拟+STL】
链接:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=3983 题意: 给定9个血槽,有三种物品,每次可以把连续相同的物品抵消 ...
- 利用.frm、.ibd恢复数据
我们知道启用innodb_file_per_table选项后,单个表(InnoDB引擎)的数据和索引放入单独的文件中(.ibd),建表语句保存在.frm文件中本文假设192.168.85.132,33 ...
- HashMap原理分析(JDK1.7.x之前)
HashMap 实现Map.Cloneable.Serializable接口,继承AbstractMap基类. HashMap map = new HashMap<String,String&g ...
- ROS中的CMakeLists.txt
在ROS的编程过程中,如果CMakeLists.txt如果写不好,编译就很难成功.如果看不懂CMakeLists.txt那么很多错误你也不知道时什么回事.所以深入了解它是很有必要的.现在我们就来看看它 ...
- 梯度优化算法总结以及solver及train.prototxt中相关参数解释
参考链接:http://sebastianruder.com/optimizing-gradient-descent/ 如果熟悉英文的话,强烈推荐阅读原文,毕竟翻译过程中因为个人理解有限,可能会有谬误 ...
- Linux内存管理5---物理内存管理
1.前言 本文所述关于内存管理的系列文章主要是对陈莉君老师所讲述的内存管理知识讲座的整理. 本讲座主要分三个主题展开对内存管理进行讲解:内存管理的硬件基础.虚拟地址空间的管理.物理地址空间的管理. 本 ...
- 006_netstat中state详解
TCP三次握手的过程如下: 主动连接端发送一个SYN包给被动连接端: 被动连接端收到SYN包后,发送一个带ACK和SYN标志的包给主动连接端: 主动连接端发送一个带ACK标志的包给被动连接端,握手动作 ...
- centos中selinux功能及常用服务配置
SELinux: Secure Enhenced Linux 常用命令 获取selinux的当前状态: # getenforce 临时启用或禁用: # setenfoce 0|1 永久性启用,需要修改 ...
- 内存分配方式,堆区,栈区,new/delete/malloc/free
1.内存分配方式 内存分配方式有三种: [1]从静态存储区域分配.内存在程序编译的时候就已经分配好,这块内存在程序的整个运行期间都存在.例如全局变量,static变量. [2]在栈上创建.在执行函数时 ...