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插件,然后一句代码就可以实现返回顶部: ...
随机推荐
- c# 对加密的MP4文件进行解密
using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...
- Nginx教程(二) Nginx虚拟主机配置
Nginx教程(二) Nginx虚拟主机配置 1 虚拟主机管理 1.1 Nginx管理虚拟主机 虚拟主机使用的是特殊的软硬件技术,它把一台运行在因特网上的服务器主机分成一台台“虚拟”的主机,每台虚拟主 ...
- Gradle 使用Maven本地缓存
如果想使用Maven本地缓存,需要定义:build.gradle 文件下定义 build.gradle repositories { mavenLocal() } Gradle使用与Maven相同的策 ...
- haproxy-代码阅读-内存管理
haproxy内存池概述 内存池按照类型分类,每个类型的内存池都有一个名字,用链表记录空闲的内存块,每个内存块大小相等,并按照16字节对齐. haporxy用pool_head 结构记录内存池 str ...
- Linux常用命令说明（记录自己Linux命令使用情况，后续会持续更新）
首次记录时间--20170602 感觉自己Linux命令使用掌握的情况非常差,今天先记录当前会的几个. 1#cd(change directory) 切换工作目录(或者叫修改当前目录) eg. cd ...
- ubuntu16.04 英文环境安装google chrome
1.下载google wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb 2.安装缺少的依赖 ...
- python学习第三个坑
##########################python 第三章 ################################这一章呢,主要是文件的操作,还有涉及到函数的一部分. PS:整 ...
- linux下部署php项目-Apache、php、mysql关联
linux下部署php项目环境可以分为两种,一种使用Apache,php,mysql的压缩包安装,一种用yum命令进行安装. 使用三种软件的压缩包进行安装,需要手动配置三者之间的关系.apache和p ...
- socket聊天室（服务端）（多线程）（TCP）
#include<string.h> #include<signal.h> #include<stdio.h> #include<sys/socket.h&g ...
- Spring+SpringMVC+MyBatis深入学习及搭建(九)——MyBatis和Spring整合
转载请注明出处:http://www.cnblogs.com/Joanna-Yan/p/6964162.html 前面讲到:Spring+SpringMVC+MyBatis深入学习及搭建(八)--My ...