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 ...
随机推荐
- Bootstrap -- 文件上传插件File Input的使用
BootstrapFileInput下载参考:http://www.jq22.com/jquery-info5231 网友经验参见:http://www.cnblogs.com/wuhuacong/p ...
- [PageNofM]一直显示数字+0
解决办法: Options->ReportOptions->DoublePass勾选即可
- sock_ntop.c
#include <stdio.h> #include <stdlib.h> #include <string.h> #include <netinet/in ...
- ==========2014-04-24=========winform树控件勾选方法 和获取所有选中的
http://bbs.bccn.net/thread-197567-1-1.html /// <summary> /// 已选中或取消选中树节点上的复选框时 /// </summar ...
- <转载>iTerm2使用技巧
原文链接:http://www.cnblogs.com/756623607-zhang/p/7071281.html 1.设置窗口 定位到 [Preferences - Profiles - Wi ...
- 用accessKey设置快捷键
<!DOCTYPE html> <html> <body> <a href="http://www.w3school.com.cn/html/&qu ...
- SVG2PNG(前台和后台将SVG转换为PNG)--amcharts导出png
在项目中用到了amcharts,amcharts图标统计插件是利用SVG实现的,其自带下载png功能,但是不支持IE以下浏览器.因此研究了SVG转换为png,最终实现的效果是将amcharts生成一张 ...
- Levmar 配置
Levmar配置 原文有些错误,在我的博客里已经改好了:http://blog.sina.com.cn/s/blog_45b747f70101he1t.html 如果6或者7自由度机器人的运动学逆解无 ...
- Linux Makefile 中的陷阱【转】
转自:https://blog.csdn.net/QQ1452008/article/details/52247944 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog. ...
- 从Linux内核中获取真随机数【转】
转自:http://www.cnblogs.com/bigship/archive/2010/04/04/1704228.html 内核随机数产生器 Linux内核实现了一个随机数产生器,从理论上说这 ...