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插件,然后一句代码就可以实现返回顶部: ...
随机推荐
- zepto全选按钮之全选会根据按钮是否被全部选中更改状态
在做手机端二次开发购物车的时候,发现zepto全选,没找到,或者功能不是自己想要的 后来做好,分享给需要的人 //全选或多选处理 var CheckAll = $('#items_check ...
- OpenCV探索之路（九）：模板匹配
模板匹配的作用在图像识别领域作用可大了.那什么是模板匹配? 模板匹配,就是在一幅图像中寻找另一幅模板图像最匹配(也就是最相似)的部分的技术. 说的有点抽象,下面给个例子说明就很明白了. 在上面这幅全明 ...
- spring-线程池（2）
继承:http://www.cnblogs.com/crazylqy/p/4220743.html spring设置容器启动时运行线程类(可循环执行) 修改以下两文件, 1.spring设置容器启动时 ...
- app界面设计字体规范
通过对不同类型的app进行总结,总结出app的字体规范. 一.字体选择 1.IOS:苹果ios 9系统开始,系统最新的默认中文字体是:苹方.英文字体是: San Francisco 2.Android ...
- 快速找到ARP病毒源
第一招:使用Sniffer抓包 在网络内任意一台主机上运行抓包软件,捕获所有到达本机的数据包.如果发现有某个IP不断发送请求包,那么这台电脑一般就是病毒源.原理:无论何种ARP病毒变种,行为方式有两种 ...
- Hash Table Performance in R: Part I（转）
What Is It? A hash table, or associative array, is a well known key-value data structure. In R there ...
- 初码-Azure系列-如何在控制面板中选择中文版操作系统
之前在文章<初码-Azure系列-记一次从阿里云到Azure的迁移和部署>中说到,默认的Windows Server 2016操作系统是英文版,后来摸索出中文版的方法,如下:
- Python有哪些好用的语言翻译方法
最近有个需求,要将几万条数据从日语翻译成中文.因为数据的获取和处理用的是python代码,所以想先尝试翻译部分也用python实现. 目前网上查到的翻译方法有百度.有道云以及谷歌翻译,下面会对这三个方 ...
- 2-SAT算法
参考blog 参考论文 参考论文 题目 & 题解 裸2-SAT poj3683 poj3207 poj3678 poj3648 2-SAT + 二分法 poj2723 poj2749 hdu3 ...
- (转)让浏览器支持Webp
转载:https://segmentfault.com/a/1190000005898538?utm_source=tuicool&utm_medium=referral Webp介绍 web ...