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插件,然后一句代码就可以实现返回顶部: ...
随机推荐
- 对JVM运行时常量池的一些理解
1.JVM运行时常量池在内存的方法区中(在jdk8中,移除了方法区) 2.JVM运行时常量池中的内容主要是从各个类型的class文件的常量池中获取,对于字符串常量,可以调用intern方法人为添加,而 ...
- 回归-LDA与QDA
作者:桂. 时间:2017-05-23 06:37:31 链接:http://www.cnblogs.com/xingshansi/p/6892317.html 前言 仍然是python库函数sci ...
- 2017年最好的6个WEB前端开发手册下载
php中文网为你推荐6个web前端开发相关手册下载,适合web开发人员和php web开发人员进行下载参考学习! 一. html5中文手册 通过制定如何处理所有 HTML 元素以及如何从错误中恢复的精 ...
- 对 Servlet 的改进--------Struts2 引入
通过上一篇博客:Servlet 的详解 http://www.cnblogs.com/ysocean/p/6912191.html,我们大致知道了 Servlet 的基本用法.但是稍微分析一下 Ser ...
- 简单物联网：外网访问内网路由器下树莓派Flask服务器
最近做一个小东西,大概过程就是想在教室,宿舍控制实验室的一些设备. 已经在树莓上搭了一个轻量的flask服务器,在实验室的路由器下,任何设备都是可以访问的:但是有一些限制条件,比如我想在宿舍控制我种花 ...
- php笔记一
一.Login登陆验证步骤: 1.赋值,用$_POST将id和password传递给loginProcess.php登陆验证页面. 2.建立数据库连接 $conn=mysql_connect($hos ...
- WEB前端：浏览器（IE+Chrome+Firefox）常见兼容问题处理--01
兼容问题目录 1.IE6下怪异盒模型 2.IE6下最小高度问题 3.IE6下不支持1px的点线 4.IE6下内容会把父级的高度撑开 5.IE6下只支持给a标签添加伪类 6.IE67下不支持给块标签加d ...
- go服务端----使用dotweb框架搭建简易服务
使用dotweb框架搭建简易服务 go语言web框架挺多的,所谓琳琅满目,里面也有很多优秀的,比如echo.beego等,但体验下来,总是觉得哪里有点小疙瘩,后来才明白过来,echo太简单,很多日常使 ...
- Vulkan Tutorial 12 Fixed functions
操作系统:Windows8.1 显卡:Nivida GTX965M 开发工具:Visual Studio 2017 早起的图形API在图形渲染管线的许多阶段提供了默认的状态.在Vulkan中,从vie ...
- oracle日期时间函数 总结
表中存在伪列:sysdate,systimestamp 伪列存在但是不显示 select sysdate from dual; select systimestamp from dual; 日期计算公 ...