<!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. JDK安装以及配置环境变量的步骤

    ---恢复内容开始--- 一.JDK安装 JDK下载链接:https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads ...

  2. 实现的是Linux和Windows之间的一种共享--samba

    samba 基本配置及自定义控制 https://www.cnblogs.com/l-hh/p/9473937.html Samba简介: Samba实现的是Linux和Windows之间的一种共享, ...

  3. [Usaco2013 DEC] Vacation Planning

    [题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=4093 [算法] 对于k个枢纽 , 分别在正向图和反向图上跑dijkstra最短路 , ...

  4. Linux网络协议栈(三)——网络设备(1)

    网络设备(network device)是内核对网络适配器(硬件)的抽象与封装,并为各个协议实例提供统一的接口,它是硬件与内核的接口,它有两个特征:(1)    作为基于硬件的网络适配器与基于软件的协 ...

  5. jquery cloudzoom 3.0,magiczoom 放大镜插件 破解 移除版权信息

    jquery Cloud Zoom一款放大镜插件.但是无奈 官方下载的始终有版权信息,因此想到如下方法去掉版权信息,测试可行! 官方网址:http://www.starplugins.com/clou ...

  6. 立体渲染 Volumetric Rendering

    基础概念 在3D游戏引擎中,球体.立方体以及所有其它复杂的集合体都是由三角面片组成的.引擎只会渲染物体的表面,比如球体,半透明物体等.整个世界由各种空壳构成. 立体渲染(Volumetric Rend ...

  7. bzoj 1717: [Usaco2006 Dec]Milk Patterns 产奶的模式【后缀自动机】

    就是后缀自动机的板子嘛..构造完自动机之后拓扑一下,记录size,对于size大于k的点和ans取max #include<iostream> #include<cstdio> ...

  8. Reduction operations

    Reuction operations Reduction operations A reduction operations on a tensor is an operation that red ...

  9. 购买阿里云ECS+安装宝塔面板+Mac下怎么连接阿里云ECS服务器

    1.购买阿里云ECS 2.重置实例密码 这个有点对用户不友好,实际意思就是设置服务器的root登录密码 3.配置安全组放行端口 因为服务器需要从宝塔网站download安装包,包括一些常用的服务比如S ...

  10. Vue自定义过滤器格式化数字三位加一逗号

    <template> <div class="index-compont"> <div class="totalCount"> ...