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返回页面顶部的更多相关文章

  1. 代码: 返回页面顶部 jquery

    jquery代码: 返回页面顶部 <script type="text/javascript" src="http://cdn.bootcss.com/jquery ...

  2. jquery返回滚动条顶部

    var $view = $('html,body'),$backTop = $('#backTop'), $backTop.on('click',function(){ $view.animate({ ...

  3. react-router(v4) 路由跳转后返回页面顶部问题

    遇到的问题 由A页面跳转到B页面,B页面停留在A页面的位置,没有返回到顶部. 问题分析 首先分析下出现此问题的原因: 在项目中使用的是 hashHistory,它是建立在 history 之上的,当路 ...

  4. HTML5商城开发五 实现返回页面顶部

    本文内容主要是网上参考收集,介绍四种简单的返回页面顶部代码,可以使用简单的HTML锚标记,也可使用Javascript Scroll函数动态返回等等. 一.使用锚标记返回页面顶部 使用HTML锚标记最 ...

  5. jquery实现返回页面顶部功能。

    <p id="back-to-top"> <span></span> </p> <script type="text ...

  6. js网页返回页面顶部的小方法

    咳咳,在网页出现滚动条的时候,许多网站会在右下角出现一个图标,点击可以回到页面顶部 本文就记录下js实现代码: 1.在html页面body添加dom元素 <img src="toTop ...

  7. 【jQuery】页面顶部显示的进度条效果

    <!Doctype html> <html> <head> <title>页面顶部显示的进度条效果</title> <meta htt ...

  8. 解决点击a标签返回页面顶部的问题

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. (转)解决点击a标签返回页面顶部的问题

    本文转载至http://www.cnblogs.com/chenluomenggongzi/p/5950670.html 1 <!DOCTYPE html> 2 <html lang ...

随机推荐

  1. java Future模式的使用

    一.Future模式的使用. Future模式简述 传统单线程环境下,调用函数是同步的,必须等待程序返回结果后,才可进行其他处理. Futrue模式下,调用方式改为异步. Futrue模式的核心在于: ...

  2. 三、编译第一步 make xxx_defconfig——Makefile.build 脚本

    3.1 上章分析回顾 3.1 上章分析出的参数 3.1.1 变量 MAKECMDGOALS = xxx_defconfig KBUILD_EXTMOD = version_h := include/g ...

  3. 20155313 2016-2017-2 《Java程序设计》第五周学习总结

    20155313 2016-2017-2 <Java程序设计>第五周学习总结 教材内容学习 第八章 异常处理 程序中总有些意想不到的状况所引发的错误,Java中的错误也以对象方式呈现为ja ...

  4. POJ1251 Jungle Roads【最小生成树】

    题意: 首先给你一个图,需要你求出最小生成树,首先输入n个节点,用大写字母表示各节点,接着说有几个点和它相连,然后给出节点与节点之间的权值.拿第二个样例举例:比如有3个节点,然后接下来有3-1行表示了 ...

  5. MySQL自动设置create_time和update_time

    参考表结构 CREATE TABLE `t_baby` ( `baby_id` int(11) NOT NULL AUTO_INCREMENT, `user_id` int(11) NOT NULL, ...

  6. split('\r\n')

    '\r'是回车,'\n'是换行,前者使光标到行首,后者使光标下移一格.通常用的Enter是两个加起来. 实际我的脚本读取FTP的列表,如果用的split("\r\n"),可以获得正 ...

  7. Struts2自定义拦截器处理全局异常

    今天在整理之前的项目的时候想着有的action层没有做异常处理,于是想着自定义拦截器处理一下未拦截的异常. 代码: package cn.xm.exam.action.safeHat; import ...

  8. Dubbo监控中心

    (1).dubbo-admin(管理控制台) 1).从https://github.com/apache/incubator-dubbo-ops下载解压 2).修改dubbo-admin配置文件中zo ...

  9. diff 命令用法--如何打补丁【原创--学习笔记】

    diff 命令用法 1.”-u”:表示在比较结果中输出上下文中一些相同的行,这有利于人工定位 2.“-r“:表示递归比较各个子目录下的文件 3.“-N“:将不存在的文件当作空文件 4.“-w“:忽略对 ...

  10. ubuntu 里切换 gcc,g++ 的版本

    https://askubuntu.com/questions/26498/choose-gcc-and-g-version https://stackoverflow.com/questions/7 ...