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. WPF学习随笔

    内容控件 Padding内边距,Margin外边距 1.ScrollViewer滚动条控件 <ScrollViewer VerticalScrollBarVisibility="Vis ...

  2. Spring事务处理

    事务(Transaction)是并发控制的单位,是用户定义的一个操作序列.这些操作要么都做,要么都不做,是一个不可分割的工作单位. 数据库向用户提供保存当前程序状态的方法,叫事务提交(commit): ...

  3. HotSpot的算法实现

    1.枚举根节点 可达性分析中从GC Roots节点找引用,可作为GC Roots的节点主要是全局性的引用与执行上下文中,如果要逐个检查引用,必然消耗时间.另外可达性分析对执行时间的敏感还体现在GC停顿 ...

  4. JVM与对象初始化

    一个对象从无到有的过程 A a = new A() 1.JVM遇到new指令就会去堆内存分配一块内存空间,内存的大小在编译期间就可以确定 2.接着调用A的构造函数,这里构造的时候会沿着继承树逆流而上, ...

  5. Visual Studio2017中如何让Entity Framework工具【ADO.NET实体数据模型】支持MYSQL数据源

    熟悉Entity Framework应该对以下图片不陌生,他就是ADO.NET实体数据模型向导:可以将数据库的表自动生成模型类,或者创建Code First的模型文件. 但是这个模型向导默认只显示微软 ...

  6. Quartz.net 定时任务之简单任务

    一.概述 1.quartz.net 是一款从java quartz 上延伸出来的定时任务框架. 2.我在网上看到很多大神写过关于quartz.net 的博客.文章等,在这些博客文章里也学会了很多关于q ...

  7. Hibernate createQuery调用joincolumn

    1. Beans a. Version Bean package locationService.beans; import java.sql.Timestamp; import java.util. ...

  8. Javascript版-显示相应图片的详细信息

    Hi All, 分享一个通过JS来显示相应图片的详细信息. 需求:进入页面时,动态加载图片信息:当鼠标移动到某一图片上时,则显示该图片的大图片并显示相应说明信息:当鼠标移开图片时,清除新创建的元素. ...

  9. promise知识点汇总

    Promise对象被写进ES6的规范当中,提供的是另外一种更加友好的对于异步编程的解决方案,在这之前大多使用的是回调函数和事件来实现异步编程. 怎么来理解Promise对象呢?对于这个ES6新加入的小 ...

  10. 【T-SQL进阶】02.理解SQL查询的底层原理

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