jq-animate实现返回顶部效果
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实现返回顶部效果的更多相关文章
- JQuery 实现返回顶部效果
首先要里了解一下几个知识 $(window).scrollTop() ---滚动条距顶部距离 fadeIn() 方法使用淡入效果来显示被选元素,假如该元素是隐藏的. fadeOut() 方法使用淡出效 ...
- WEB返回顶部效果
1. PC端页面返回顶部效果 1 $( window ).scroll(function(){ 2 if( $( window ).scrollTop() > 500 ){ // 当顶部的滚动距 ...
- JavaScript实现返回顶部效果
仿淘宝回到顶部效果 需求:当滚动条到一定位置时侧边栏固定在某个位置,再往下滑动到某一位置时显示回到顶部按钮.点击按钮后页面会动态滑到顶部,速度由快到慢向上滑. 思路: 1.页面加载完毕才能执行js代码 ...
- js返回顶部效果
当用户浏览的网页过于长的时候,用户在浏览到网页底部想要在返回顶部需要滚动好几次滚轮才能返回顶部,不仅麻烦,而且用户体验也会很差.现在的大多是页面都会在页面顶部或者是页面的可见区域的某一位置固定一个按钮 ...
- 简约的返回顶部效果（jQuery）
博客建好也快一个月了,主题是在原有主题的基础上做的修改,喜欢这样的清新简约风格,为了更好的体验,以后也会经常做修改. 一般博客的文章都比较长,看到下面不能快速返回到顶部还真是不方便,今天自己动手写了一 ...
- HTML页面实现返回顶部效果 go to top
1.首先导入jQuery插件. 2.js代码: $(window).scroll(function () { if($(window).scrollTop()>=100) { $(". ...
- jQuery 返回顶部效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jQ 移动端返回顶部代码整理
//返回顶部 $('#btn-scroll').on('touchend',function(){ var T = $(window).scrollTop(); var t = setInterval ...
- 一句jQuery代码返回顶部
一句jQuery代码返回顶部 效果体验: http://hovertree.com/texiao/yestop/ 使用方法: 只需引用jQuery库和YesTop插件,然后一句代码就可以实现返回顶部: ...
随机推荐
- java中一个重要思想：面向对象
面向对象: 1, 面向过程的思想(合适的方法出现在合适的类里面) 准备去一个地方: 先买车, 挂牌, 开导航, 踩油门, 过黄河, 穿越珠穆朗玛峰... 2, 面向对象的思想 我开着车去, 车怎么去随 ...
- Spring——Web应用中的IoC容器创建(WebApplicationContext根应用上下文的创建过程)
基于Spring-4.3.7.RELEASE Spring的配置不仅仅局限在XML文件,同样也可以使用Java代码来配置.在这里我使用XML配置文件的方式来粗略地讲讲WebApplicationCon ...
- MIME协议在邮件中的应用详解
1.定义 全称是多用途互联网邮件扩展(MIME,Multipurpose Internet Mail Extensions),在MIME出台之前,使用RFC 822只能发送基本的ASCII码文本信息, ...
- numpy之索引和切片
索引和切片 一维数组 一维数组很简单,基本和列表一致. 它们的区别在于数组切片是原始数组视图(这就意味着,如果做任何修改,原始都会跟着更改). 这也意味着,如果不想更改原始数组,我们需要进行显式的复制 ...
- jQ实现的一个轮播图
众所周知,轮播图是被广泛的运用的. 轮播图我们在很多的网站上都可以看到,例如淘宝.京东这些网站都很常见. 下面开始我们的轮播之旅: 搭建我们的骨架: <!DOCTYPE html> < ...
- 《JavaScript高级程序设计》里对 call() 和 apply() 的解释 (116页)
每个函数都包含两个非继承而来的方法:apply()和call().这两个方法的用途都是在特定的作用域中调用函数,实际上等于设置函数体内this对象的值. apply(): 方法接受两个参数:一个是在其 ...
- VR大时代-全景智慧城市搭建是一个任重而道远的任务
全景智慧城市搭建是一个任重而道远的任务,但是也促进了实体市场的蓬勃发展与进步.VR技术改变了人们以往的娱乐方式,而全景智慧城市将会彻底改变人们的生活习惯.VR是未来的计算平台,更是人力发展历史中,技术 ...
- CCS Debug Assertion Failed
下载安装CCS7.1后编译工程时报错,如下: 本来以为这种情况是由于CCS没有安装成功所导致的,但尝试安装其他版本时也发生同样的问题. 于是登录到 TI的wiki 上查找原因,在安装栏下说明: Ens ...
- 如何在不使用系统函数的情况下实现PHP中数组系统函数的功能
PHP中为我们提供了各种各样的系统函数来实现我们需要的各种功能,那么,在不使用系统函数的情况下我们要怎样来实现这些功能呢?以下就是几种系统函数的实现方式. 首先,我们来定义一个数组: $arr= ar ...
- 搭建eureka服务
1.pom.xml <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www ...