WEB返回顶部效果
1. PC端页面返回顶部效果
1 $( window ).scroll(function(){
2 if( $( window ).scrollTop() > 500 ){ // 当顶部的滚动距离大于500px时,显示返回顶部按钮
3 $('.backto_top_btn').fadeIn( 300 ); // 给返回顶部按钮的显示隐藏加了一个简单的淡入淡出效果
4 }else{
5 $('.backto_top_btn').fadeOut( 300 );
6 }
7 })
8
9 $('.backto_top_btn').click(function(){
10 $('body,html').animate( {scrollTop: 0}, 300 ); // 点击返回顶部按钮,文档在300ms内完成滚动到顶部
11 });
2. 移动端WEB页面返回顶部效果
// 返回顶部图标 .back_top 的显示与隐藏
$( window ).scroll(function(){
if( $( window ).scrollTop() > 500 ){
$('.backto_top_btn').show( 600 );
}else{
$('.backto_top_btn').hide( 600 );
}
})
// 返回顶部的动画(速度)
$('.back_top').click(function(){
backToTop(0.3, 10);
);
// 给滚动加上动画效果
function goTop(acceleration, time) {
acceleration = acceleration || 0.1;
time = time || 16;
var x1 = 0;
var y1 = 0;
var x2 = 0;
var y2 = 0;
var x3 = 0;
var y3 = 0;
if (document.documentElement) {
x1 = document.documentElement.scrollLeft || 0;
y1 = document.documentElement.scrollTop || 0;
}
if (document.body) {
x2 = document.body.scrollLeft || 0;
y2 = document.body.scrollTop || 0;
}
var x3 = window.scrollX || 0;
var y3 = window.scrollY || 0;
var x = Math.max(x1, Math.max(x2, x3));
var y = Math.max(y1, Math.max(y2, y3));
var speed = 1 + acceleration;
window.scrollTo(Math.floor(x / speed), Math.floor(y / speed));
if (x > 0 || y > 0) {
var invokeFunction = "goTop(" + acceleration + ", " + time + ")";
window.setTimeout(invokeFunction, time);
}
}
WEB返回顶部效果的更多相关文章
- JQuery 实现返回顶部效果
首先要里了解一下几个知识 $(window).scrollTop() ---滚动条距顶部距离 fadeIn() 方法使用淡入效果来显示被选元素,假如该元素是隐藏的. fadeOut() 方法使用淡出效 ...
- jq-animate实现返回顶部效果
jq-animate实现返回顶部效果: <!doctype html> <html lang="en"> <head> <meta cha ...
- 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 ...
- 一句jQuery代码返回顶部
一句jQuery代码返回顶部 效果体验: http://hovertree.com/texiao/yestop/ 使用方法: 只需引用jQuery库和YesTop插件,然后一句代码就可以实现返回顶部: ...
- 使用jquery实现返回顶部按钮
实现返回顶部效果,首先需要监听页面的scroll事件,其次才是获取到页面当前的滚动高度 $(window).scrollTop(); 具体代码如下: jquery获取页面元素的一些边界值(宽,高,滚动 ...
随机推荐
- MD5密码加密
using System; using System.Security.Cryptography; using System.Text; namespace DimoNetwork.Common.DE ...
- tail 尾巴
tail用法:尾巴,取文件的最后N行,默认前10行, -n 2 取前2行-n 2,简写就是-2 -f 文件 跟踪一个文件尾部的时时变化. 克隆出一个窗口执行:循环脚本:for n in `seq 1 ...
- MySQL 的 CURD 操作
0. 说明 CURD 操作通常是使用关系型数据库系统中的结构化查询语言(Structured Query Language,SQL)完成的 CURD 定义了用于处理数据的基本原子操作 CURD 代表创 ...
- 匿名访问windows server 2008 R2 文件服务器的共享
匿名访问windows server 2008 R2 文件服务器的共享 匿名访问windows 2008 R2 文件服务器的共享,七步:第一步 取消简单文件共享:第二步 设置需要共享的文件夹every ...
- 用apiDoc简化接口开发
身为程序员最讨厌看到的代码没有注释,自己的代码却讨厌写注释,觉得麻烦,接口也是这样. 比如公司要做一个H5活动的页面,开发文档已经发到后端开发.设计.与前端的邮箱了,其实这个时候就可以开始开发了.开发 ...
- Oracle 导出用户下的所有索引创建语句
SELECT dbms_lob.substr(dbms_metadata.get_ddl('INDEX', INDEX_NAME))||';' from dba_indexes where owne ...
- route命令详解与使用实例 ,同时访问内外网
route命令详解与使用实例 2011-10-18 12:19:41| 分类: 其他 | 标签:route |字号 订阅 1. 使用背景 需要接入两个网络,一个是部署环境所在内 ...
- 记录一次elasticsearch-php工作过程
初始化 $hosts = array('192.168.30.41'); $this->client = \Elasticsearch\ClientBuilder::create()->s ...
- Kafka--基础知识
- centos7 安装svn, 同时支持 svn 和 http访问
1. 安装 svn [root@svn conf]#yum install subversion [root@svn conf]# svn --version svn, version 1.7.14 ...