<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>返回顶部</title>

    <script src="scripts/jquery-1.7.1.min.js"></script>

</head>

<body>

<script type="text/javascript">

$(function(){

var toppos = 0;

$(".back_top_index").hide();

$(document).scroll(

  function(){

    toppos=$(document).scrollTop();

    var oClient =$(window).height();//当前窗口可视区域高度

    if(toppos>oClient){

      $(".back_top_index").fadeIn();

    }else if(toppos==0){

      $(".back_top_index").fadeOut();

    }

  }

)

$(".back_top_index").click(function(){

    $("html,body").animate({scrollTop:0})

  })

})

</script>

<div style="height:2000px;">3423424</div>

<div class="back_top_index">1</div>

<style>

.back_top_index{width: 50px;height: 50px;position: fixed;bottom: 10px;right: 10px;background-color: red;}

</style>

</body>

</html>

jQuery 返回顶部效果的更多相关文章

  1. JQuery 实现返回顶部效果

    首先要里了解一下几个知识 $(window).scrollTop() ---滚动条距顶部距离 fadeIn() 方法使用淡入效果来显示被选元素,假如该元素是隐藏的. fadeOut() 方法使用淡出效 ...

  2. jquery返回顶部，支持手机

    jquery返回顶部,支持手机 效果体验:http://hovertree.com/texiao/mobile/6/ 在pc上我们很容易就可以用scrollTop()来实现流程的向上滚动的返回到顶部的 ...

  3. jQuery返回顶部实用插件YesTop

    只需一句jQuery代码实现返回顶部效果体验:http://hovertree.com/texiao/yestop/ 使用方法:只需引用jQuery库和YesTop插件(jquery.yestop.j ...

  4. jQuery返回顶部（精简版）

    jQuery返回顶部(精简版) <!DOCTYPE html><html lang="en"><head> <meta charset=& ...

  5. jq-animate实现返回顶部效果

    jq-animate实现返回顶部效果: <!doctype html> <html lang="en"> <head> <meta cha ...

  6. WEB返回顶部效果

    1. PC端页面返回顶部效果 1 $( window ).scroll(function(){ 2 if( $( window ).scrollTop() > 500 ){ // 当顶部的滚动距 ...

  7. JavaScript实现返回顶部效果

    仿淘宝回到顶部效果 需求:当滚动条到一定位置时侧边栏固定在某个位置,再往下滑动到某一位置时显示回到顶部按钮.点击按钮后页面会动态滑到顶部,速度由快到慢向上滑. 思路: 1.页面加载完毕才能执行js代码 ...

  8. 简约的返回顶部效果（jQuery）

    博客建好也快一个月了,主题是在原有主题的基础上做的修改,喜欢这样的清新简约风格,为了更好的体验,以后也会经常做修改. 一般博客的文章都比较长,看到下面不能快速返回到顶部还真是不方便,今天自己动手写了一 ...

  9. js返回顶部效果

    当用户浏览的网页过于长的时候,用户在浏览到网页底部想要在返回顶部需要滚动好几次滚轮才能返回顶部,不仅麻烦,而且用户体验也会很差.现在的大多是页面都会在页面顶部或者是页面的可见区域的某一位置固定一个按钮 ...

随机推荐

  1. Junit常用操作

    断言方法: public static void assertEquals(Object[] expected, Object[] actual) // 测试a是否等于b public static ...

  2. bzoj 4668 冷战 —— 并查集按秩合并

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=4668 按秩合并维护并查集的树结构,然后暴力找路径上的最大边权即可. 代码如下: #inclu ...

  3. 02_电话拨号器intent说明

    怎么在第一个Activity打开第二个Activity?在一个Activity中打开另外一个Activity,实际上之前已经做过,就是电话拨号器. package com.itheima.callne ...

  4. C++中class在实例化前到底占用多少空间

    最近忽然想起一个问题,C++中class在实例化前到底占用多少空间?我隐约记得书上是这么说的“类在实例化时才分配空间”!但是当我写下这个小程序的时候,杯具产生了—— #include<iostr ...

  5. bzoj 3503: [Cqoi2014]和谐矩阵【高斯消元】

    如果确定了第一行,那么可以推出来整个矩阵,矩阵合法的条件是n+1行全是0 所以推出来n+1行和1行的关系,然后用异或高斯消元来解即可 #include<iostream> #include ...

  6. CF1140G Double Tree

    题解 首先如果我们要确定出每个\(dis_{i \to i+1 , i \in odd}\) 这个可以用两遍树形\(DP\)来解决 一遍是考虑走子树子树绕过来的 一遍是考虑从走祖先绕过来的 然后就可以 ...

  7. [USACO 2011 Dec Gold] Cow Calisthenics【二分】

    Problem 1: Cow Calisthenics [Michael Cohen, 2010] Farmer John continues his never-ending quest to ke ...

  8. SIFT特征点检测与匹配

    SIFT的步骤如下: (1) 尺度空间极值检测(Scale-space Extrema Detection) 也就是在多尺度高斯差分(Difference of Gauss)空间中检测极值点(3x3x ...

  9. Bryce1010的linux课程设计

    1.设计目的 2.软件环境 3.要求 4.需求分析 5.总体设计 6.详细设计 7.调试与测试 8.总结 思路整理: 1.如果要开始编译着手的准备 SQLite数据库的安装 gtk+的安装 (.... ...

  10. Wannafly挑战赛10：A题：小H和迷宫

    题目描述       小H陷入了一个迷宫中,迷宫里有一个可怕的怪兽,血量有N点,小H有三瓶魔法药水,分别可以使怪兽损失a%.b%.c%的血量(之后怪兽的血量会向下取整),小H想合理地运用这三瓶药水,使 ...