jquery代码: 返回页面顶部

<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$(".go-top").click(function () {
$(document.body).animate({scrollTop: 0}, 800);
return false;
});
//滚屏
$(window).scroll(function() {
if($(document.body).scrollTop()>$(window).height()){
//滚动高度大于(第一屏)页面高度,才显示
$(".go-top").show();
goTopTimer = setTimeout(function(){
$(".go-top").hide();
}, 2000);//1000毫秒
}
});
});
</script>
<style type="text/css">
body{height:5000px;background:url("http://s.cn.bing.net/az/hprichbg/rb/CrestedPigeon_ZH-CN11090922142_1920x1080.jpg");}
.go-top{position:fixed;right:1em;bottom:1em;background:#000;color:#fff;padding:1em;cursor:pointer;display:none;border-radius:5px;}
</style>

..

代码: 返回页面顶部 jquery的更多相关文章

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

    <div id="toTop" style="width:30px;height:110px;border:1px solid #74B9DC; border-ra ...

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  9. jquery返回页面顶部

    1.此博文图片样式引用腾讯网站,效果如下: 2.样式设置: #toTop { /*选中的背景图片的大小*/ width: 54px; height: 54px; display: none;/*刚开始 ...

随机推荐

  1. IDEA错误:Cannot start compilation: the output path is not specified for module "XXX".

    错误是发生在从github上checkout自己的项目时.因为没有将配置文件一起上传,所以在运行java程序时有了这个报错: Cannot start compilation: the output ...

  2. CTF之ROT加解密

    常见的ROT加密包括ROT5,ROT13,ROT18,ROT47 ROT5:只是对数字进行编码.用当前数字往后数的第五个数字替换当前数字: 例:123sb——>678sb ROT13:只是对字母 ...

  3. 【vue】Mac上安装Node和NPM

    http://bubkoo.com/2017/01/08/quick-tip-multiple-versions-node-nvm/ 作为前端开发者,node和npm安装必不可少.然而有时会因为安装新 ...

  4. test20180919 递归问题

    题意 定义 \[ f(n)=\left\{ \begin{array}{} 1 & n=1\\ f(n-f(f(n-1)))+1 & n>1 \end{array} \right ...

  5. ubuntu14.04下安装ffmpeg

    ubuntu14.04下安装ffmpeg 一.安装各种依赖包 1.yasm(libx264需要依赖yasm) sudo apt-get install yasm 2.libx264 sudo apt- ...

  6. cacheAsBitmap位图缓存

    使用cacheAsBitmap将缓存显示对象的内部位图表示形式. 此缓存可以提高包含复杂矢量内容的显示对象的性能.此方法适合运用于较多的图片或文字移动,不过也不能太随意乱用,有利必有弊,使用cache ...

  7. Java使用Unsafe接口操作数组Demo

    public class unSafeArrayDemo { private static final sun.misc.Unsafe UNSAFE; private static final lon ...

  8. python 之 python3内置函数

    一. 简介 python内置了一系列的常用函数,以便于我们使用,python英文官方文档详细说明:点击查看, 为了方便查看,将内置函数的总结记录下来. 二. 使用说明 以下是Python3版本所有的内 ...

  9. 二分查找算法,java实现

    二分查找算法是在有序数组中用到的较为频繁的一种算法. 在未接触二分查找算法时,最通用的一种做法是,对数组进行遍历,跟每个元素进行比较,其时间复杂度为O(n),但二分查找算法则更优,因为其查找时间复杂度 ...

  10. centos6安装GitLab全程详解和常见问题解决

    GitLab,是一个使用 Ruby on Rails 开发的开源应用程序,与Github类似,能够浏览源代码,管理缺陷和注释,非常适合在团队内部使用. 官方只提供了Debian/Ubuntu系统下的安 ...