原生JS实现返回顶部和滚动锚点
;(function (window,doc,undefined) {
function rollingAnchor(){
this.timer ='';
}
rollingAnchor.prototype = {
init: function () {
return this;
},
//返回顶部
returnTop: function (acceleration,time,callback) {
var that = this,
acceleration = acceleration || 0.1,
time = time || 10,
speed = 1 + acceleration;
clearInterval(that.timer);
that.timer = setInterval(function() {
if (getScrollTop() <= 0){
clearInterval(that.timer);
if(callback) callback();
return;
}
//这行代码是关键,取得滚动条竖直距离,除以speed后再给滚动条设置竖直距离
setScrollTop(Math.floor(getScrollTop() / speed));
}, time);
return this;
}, //返回锚点
anchorPosition: function (idName,duration,dir) {
if(typeof idName != 'object') { idName = document.getElementById(idName); }
if(!idName) return;
var z = this;
z.el = idName;
z.p = getPos(idName,dir);
z.s = getScroll();
z.clear = function(){window.clearInterval(z.timer);z.timer=null};
z.clear();
z.t=(new Date).getTime();
z.step = function(){
var t = (new Date).getTime();
var p = (t - z.t) / duration;
if (t >= duration + z.t) {
z.clear();
window.setTimeout(function(){z.scroll(z.p.y, z.p.x)},13);
} else {
var st = ((-Math.cos(p*Math.PI)/2) + 0.5) * (z.p.y-z.s.t) + z.s.t;
var sl = ((-Math.cos(p*Math.PI)/2) + 0.5) * (z.p.x-z.s.l) + z.s.l;
z.scroll(st, sl);
}
};
z.scroll = function (t, l){window.scrollTo(l, t)};
z.timer = window.setInterval(function(){z.step();},13);
} }; function intval(v) {
v = parseInt(v);
return isNaN(v) ? 0 : v;
} //获取元素信息
function getPos(e,dir) {
var l = 0;
var t = 0;
var dir = dir || 0;
var w = intval(e.style.width);
var h = intval(e.style.height);
var wb = e.offsetWidth;
var hb = e.offsetHeight;
while (e.offsetParent){
l += e.offsetLeft + (e.currentStyle?intval(e.currentStyle.borderLeftWidth):0);
t += e.offsetTop + (e.currentStyle?intval(e.currentStyle.borderTopWidth):0);
e = e.offsetParent;
}
l += e.offsetLeft + (e.currentStyle?intval(e.currentStyle.borderLeftWidth):0);
t += e.offsetTop + (e.currentStyle?intval(e.currentStyle.borderTopWidth):0) - dir;
return {x:l, y:t, w:w, h:h, wb:wb, hb:hb};
} //获取滚动条信息
function getScroll() {
var t, l, w, h;
if (document.documentElement && document.documentElement.scrollTop) {
t = document.documentElement.scrollTop;
l = document.documentElement.scrollLeft;
w = document.documentElement.scrollWidth;
h = document.documentElement.scrollHeight;
} else if (document.body) {
t = document.body.scrollTop;
l = document.body.scrollLeft;
w = document.body.scrollWidth;
h = document.body.scrollHeight;
}
return { t: t, l: l, w: w, h: h };
} //设置滚动条的竖直距离,实现效果的关键就是在很短的间隔时间内不断地修改滚动条的竖直距离,以实现滚动效果
function setScrollTop(value) {
doc.documentElement.scrollTop = value;
doc.body.scrollTop = value;
} //取得滚动条的竖直距离
function getScrollTop() {
return doc.documentElement.scrollTop || doc.body.scrollTop;
} if(typeof define === 'function' && define.amd){
define('rollingAnchor',[],function(){return rollingAnchor});
}else{
window.rollingAnchor = function (options) {
return new rollingAnchor(options).init();
};
} }(this,document)); //调用
var ToolBarContainer = function () {
var anchor = rollingAnchor(),
init = function () {
query.add(doc.body, 'click', clickEvent);
},
clickEvent = function (event) {
var target = query.getTarget(event);
if(target.id == 'a-1'){
anchor.returnTop(0.2,20);
return;
}
if(target.id == 'a-2'){
anchor.anchorPosition('a2',500);
return;
}
if(target.id == 'a-3'){
anchor.anchorPosition('a3',500);
return;
}
if(target.id == 'a-4'){
anchor.anchorPosition('a4',500);
return;
}
if(target.id == 'a-5'){
anchor.anchorPosition('a5',500);
return;
}
};
init();
}();
原生JS实现返回顶部和滚动锚点的更多相关文章
- 基于原生js的返回顶部组件,兼容主流浏览器
基于原生js的返回顶部插件,兼容IE8及以上.FF.chrome等主流浏览器. js文件中封装了getScrollTop()和changeScrollTop()函数分别用于获取滚动条滚动的高度和修改滚 ...
- 原生js实现返回顶部特效
index.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> &l ...
- js实现返回顶部功能的解决方案
很多网站上都有返回顶部的效果,主要有如下几种解决方案. 1.纯js,无动画版本 window.scrollTo(x-coord, y-coord); window.scrollTo(0,0); 2.纯 ...
- 原生JS实现banner图的滚动与跳转
HTML部分: <div id="banner"> <!--4张滚动的图片--> <div id="inside"> < ...
- 利用原生JS实现网页1920banner图滚动效果
内容描述:随着PC设备硬件性能的进步和分辨率的不断提高,现在主流网站逐渐开始采用1920banner图,为适应这一趋势,博主设计了1920banner图的滚动效果,代码利用了原生JS实现了1920ba ...
- 小程序返回顶部top滚动
wxjs const app = getApp(); Page({ data:{ // top标签显示(默认不显示) backTopValue:false }, // 监听滚动条坐标 onPageSc ...
- 前端 css+js实现返回顶部功能
描述: 本文主要是讲,通过css+js实现网页中的[返回顶部]功能. 实现代码: HTML: <div> <button onclick="returnTop()" ...
- js网页返回顶部和楼层跳跃的实现原理
这是简单的效果图. (实现楼层间的跳跃,主要依靠的是 window.scrollTo(x,y)方法 ,将浏览器的可见区域移动到指定的x,y坐标上.) 说楼层跳跃前,先温习下,一般网页在高度较大时, ...
- js平滑返回顶部代码
随便找的一个,使用时直接调用gotoTop就行了,至于调速度之类的我没试,有兴趣的自己试试吧 注意:如果你想改变这个函数的名称千万不要忘了要同时改变第37行的那个gotoTop /** * JavaS ...
随机推荐
- saltstack系列(二)——zmq应答模式
python zeromq介绍 1.ZeroMQ并不是一个对socket的封装,不能用它去实现已有的网络协议. 2.有自己的模式,不同于更底层的点对点通讯模式. 3.有比tcp协议更高一级的协议(当然 ...
- duck typing
在程序设计中,鸭子类型(英语:duck typing)是动态类型的一种风格.在这种风格中,一个对象有效的语义,不是由继承自特定的类或实现特定的接口,而是由"当前方法和属性的集合"决 ...
- codeforce 459DIV2 C题
题意 一串括号字符串,里面存在一些‘?’,其中‘?’既可以当作 '(' 又可以当作 ')' ,计算有多少对(l,r),在s中[sl,s(l+1),s(l+2),.....sr],内的括号是匹配的.n= ...
- Gym - 101128C:Canvas Painting
这个就是哈夫曼树哇~ 我们仨英语太差了,跟榜时候才看出来是哈夫曼树雾 一个优先队列就可以搞定 #include <cstdio> #include <algorithm> #i ...
- IWebBrowser和IE浏览器的行为不一样
原本一直以为IWebBrowser2的行为和IE浏览器的行为应该是一样的,但是最近发现事实不是如此. IE8以后的浏览器都带有兼容模式,而IWebBrowser2默认情况下是在兼容模式下运行的,可以参 ...
- c# 如何制作RealPlayer 视频播放器
c# 如何制作RealPlayer 视频播放器 主要介绍了如何使用 RealPlayer G2 Control 控件 那么我们怎么获得到这个控件呢,很简单,操作方法如下 右单击工具箱对话框的[所有 ...
- Hadoop完全分布式环境搭建(四)——基于Ubuntu16.04安装和配置Hadoop大数据环境
[系统环境] [安装配置概要] 1.上传hadoop安装文件到主节点机器 2.给文件夹设置权限 3.解压 4.拷贝到目标文件夹 放在/opt文件夹下,目录结构:/opt/hadoop/hadoop-2 ...
- 基于Ubuntu16搭建Hadoop大数据完全分布式环境
[目的]:学习大数据 在此记录搭建大数据的过程. [系统环境] 宿主机操作系统:Win7 64位 虚拟机软件:Vmware workstation 12 虚拟机:Ubuntu 16 64位桌面版 [步 ...
- C#冒泡排序和直接插入排序
/// <summary> /// 冒泡排序 /// </summary> public static void Mainsdfdrt ...
- Part10-C语言环境初始化-栈初始化lesson1
1.概念解析 ARM系统使用的是满栈! ARM采用降栈!!! 栈帧 每一个进程会有一个栈,该进程中的每一个函数会分割栈的一部分,那么每一个函数使用的那部分栈就叫做栈帧.那么所有栈帧组成了整个栈. 子函 ...