jq-animate实现返回顶部效果：

<!doctype html>

<html lang="en">

<head>

	<meta charset="UTF-8" />

	<title>jq-animate回到顶部</title>

	<style type="text/css">

		* {

			margin: 0;

			padding: 0;

		}

		#wrap {

			height: 30000px;

		}

		#toTop {

			height: 50px;

			width: 50px;

			font-size: 30px;

			line-height: 50px;

			text-align: center;

			position: fixed;

			right: 10px;

			bottom: 10px;

		}

	</style>

	<script src="js/jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script>

</head>

<body>

	<div id="wrap">

		<button id="toTop">^</button>

	</div>

	<script type="text/javascript">

		$('#toTop').click(function() {

			var top1 = $('body').scrollTop();

			var top2 = $(document).scrollTop();//document对象不能执行animate

			var top3 = $(window).scrollTop();//window对象不能执行animate

			console.log(top1);

			console.log(top2);

			console.log(top3);

			$('body').animate({

				scrollTop: '0'

			},1000);

		});

	</script>

</body>

</html>

　　

jq-animate实现返回顶部效果的更多相关文章

  1. JQuery 实现返回顶部效果

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

  2. WEB返回顶部效果

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

  3. JavaScript实现返回顶部效果

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

  4. js返回顶部效果

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

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

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

  6. HTML页面实现返回顶部效果 go to top

    1.首先导入jQuery插件. 2.js代码: $(window).scroll(function () { if($(window).scrollTop()>=100) { $(". ...

  7. jQuery 返回顶部效果

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

  8. jQ 移动端返回顶部代码整理

    //返回顶部 $('#btn-scroll').on('touchend',function(){ var T = $(window).scrollTop(); var t = setInterval ...

  9. 一句jQuery代码返回顶部

    一句jQuery代码返回顶部 效果体验: http://hovertree.com/texiao/yestop/ 使用方法: 只需引用jQuery库和YesTop插件,然后一句代码就可以实现返回顶部: ...

随机推荐

  1. Java8新特性-Lambda表达式

    1.  什么是Lambda表达式? Lambda表达式就是可以把函数作为参数传递,或者说把代码作为数据传递给函数. 2. Lambda表达式的语法格式 基本语法格式如下: 基本语法下多个变体的说明: ...

  2. 获取JUnit的执行结果

    junit执行之后会有一个结果展示,下面就来看一下怎么获取这些结果并将其存储为一个对象 junit代码如下: package test; import org.junit.After; import ...

  3. 关于springmvc时request的getReader()和getInputStream()只能调用一次的解决办法

    最近准备在原有的SSM项目的基础上添加完善的日志分析,由于是APP的后台系统,之前在规划APP的时候,并没有在APP上做埋点的处理,而如果想要进行埋点处理的话,对于未能新升级的APP用户来说,就是去了 ...

  4. [原创]CentOS实现智能DNS

    一.       环境: Centos-6.6-x64位操作系统,IP地址:210.38.248.7 二.       安装和配置bind服务: 1.      命令:yum install bind ...

  5. 【T-SQL】系列文章全文目录（2017-06-02更新）

    本系列[T-SQL]主要是针对T-SQL的总结. T-SQL基础 [T-SQL基础]01.单表查询-几道sql查询题 [T-SQL基础]02.联接查询 [T-SQL基础]03.子查询 [T-SQL基础 ...

  6. Nginx上部署HTTPS

    Nginx上部署HTTPS依赖OpenSSL库和包含文件,即须先安装好libssl-dev,且ln -s /usr/lib/x86_64-linux-gnu/libssl.so  /usr/lib/, ...

  7. wpf XAML xaml 进行 数据绑定，Resource DataContext ElementName

    先做个声明:这里绑定都在前台实现,至于后台怎么写,那比前台简单多了,但更常用的是xaml中绑定.我们分析下最简单的字符串绑定来弄清楚原理,其他的类推就是. 数据绑定主要是要弄清楚两个东西,一个是源So ...

  8. [IR] String Matching

    BWT KMP Boyer-Moore BWT [IR] BWT+MTF+AC 中已经介绍了BWT (Burrows–Wheeler_transform)数据转换算法, 这种变换方式不仅方便压缩,同时 ...

  9. lucene全文搜索之二：创建索引器（创建IKAnalyzer分词器和索引目录管理）基于lucene5.5.3

    前言: lucene全文搜索之一中讲解了lucene开发搜索服务的基本结构,本章将会讲解如何创建索引器.管理索引目录和中文分词器的使用. 包括标准分词器,IKAnalyzer分词器以及两种索引目录的创 ...

  10. 让getElementsByClassName兼容

    function getElementsByClassName(node, classname){ if(node.getElementsByClassName){ //使用现有方法 return n ...