<!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. HDU1166 敌兵布阵 —— 线段树单点修改

    题目链接:https://vjudge.net/problem/HDU-1166 C国的死对头A国这段时间正在进行军事演习,所以C国间谍头子Derek和他手下Tidy又开始忙乎了.A国在海岸线沿直线布 ...

  2. docker随谈

    最近在搞Docker,其实去年就听老师说过这个东西,说非常火,当时不以为然,还错把它当成docky.当时想想docky不就是一个快速启动工具么,有什么.现在想想真是惭愧... Docker的牛逼之处网 ...

  3. BZOJ4814,几何

    对每个关键点i,将每个三角形缩成一个线段(因为三角形不相交),然后把线段两端点 和其他关键点一起 以i为中心点 极角排序. 扫一圈.扫到一个关键点j时, 判断当前最靠近i的线段是否遮盖i到j的路径, ...

  4. 字节流与字符流简单操作（OutputStream、InputStream、Writer、Reader）

    操作流程 使用File类打开一个文件 通过字节流或者字符流的子类.指定输出的位置. 进行读/写操作 关闭输入/出 字节流与字符流 在java.io包中操作文件内容主要有两大类:字节流字符流.两大类分为 ...

  5. Pascal约瑟夫问题

    program Project2; {$APPTYPE CONSOLE} const n=; m=; Type peopleno= ..n] of integer; var datering:peop ...

  6. Gym 100548F Color (数论容斥原理+组合数)

    题意:给定 m 种颜色,把 n 盆花排成一直线的花涂色.要求相邻花的颜色不相同,且使用的颜色恰好是k种.问一共有几种涂色方法. 析:首先是先从 m 种颜色中选出 k 种颜色,然后下面用的容斥原理,当时 ...

  7. Ruby module里的self

    创建: 2018/03/15 更新: 2018/03/22 把标题ruby首字母大写 都知道def self.方法名 来定义类方法 class SampleClass def self.class_m ...

  8. idea设置控制台不打印日志

    这样做的好处是当想打印数据到控制台查看就特别方便,这个在大数据spark sql使用的多.当然如果代码报错也会打印,这个不必担心. 方案Ⅰ 方法是将这个log日志文件放到idea的资源目录里即可 lo ...

  9. bzoj 4276: [ONTAK2015]Bajtman i Okrągły Robin【线段树+最大费用最大流】

    --因为T点忘记还要+n所以选小了所以WA了一次 注意!题目中所给的时间是一边闭一边开的区间,所以读进来之后先l++(或者r--也行) 线段树优化建图,很神.(我记得还有个主席树优化建树的?)首先考虑 ...

  10. P3158 [CQOI2011]放棋子

    传送门 题解(因为公式太多懒得自己抄写一遍了--) //minamoto #include<bits/stdc++.h> #define ll long long #define R re ...