;(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实现返回顶部和滚动锚点的更多相关文章

  1. 基于原生js的返回顶部组件,兼容主流浏览器

    基于原生js的返回顶部插件,兼容IE8及以上.FF.chrome等主流浏览器. js文件中封装了getScrollTop()和changeScrollTop()函数分别用于获取滚动条滚动的高度和修改滚 ...

  2. 原生js实现返回顶部特效

    index.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> &l ...

  3. js实现返回顶部功能的解决方案

    很多网站上都有返回顶部的效果,主要有如下几种解决方案. 1.纯js,无动画版本 window.scrollTo(x-coord, y-coord); window.scrollTo(0,0); 2.纯 ...

  4. 原生JS实现banner图的滚动与跳转

    HTML部分: <div id="banner"> <!--4张滚动的图片--> <div id="inside"> < ...

  5. 利用原生JS实现网页1920banner图滚动效果

    内容描述:随着PC设备硬件性能的进步和分辨率的不断提高,现在主流网站逐渐开始采用1920banner图,为适应这一趋势,博主设计了1920banner图的滚动效果,代码利用了原生JS实现了1920ba ...

  6. 小程序返回顶部top滚动

    wxjs const app = getApp(); Page({ data:{ // top标签显示(默认不显示) backTopValue:false }, // 监听滚动条坐标 onPageSc ...

  7. 前端 css+js实现返回顶部功能

    描述: 本文主要是讲,通过css+js实现网页中的[返回顶部]功能. 实现代码: HTML: <div> <button onclick="returnTop()" ...

  8. js网页返回顶部和楼层跳跃的实现原理

    这是简单的效果图. (实现楼层间的跳跃,主要依靠的是 window.scrollTo(x,y)方法 ,将浏览器的可见区域移动到指定的x,y坐标上.)   说楼层跳跃前,先温习下,一般网页在高度较大时, ...

  9. js平滑返回顶部代码

    随便找的一个,使用时直接调用gotoTop就行了,至于调速度之类的我没试,有兴趣的自己试试吧 注意:如果你想改变这个函数的名称千万不要忘了要同时改变第37行的那个gotoTop /** * JavaS ...

随机推荐

  1. json和pickle序列化模块

    一.json序列化模块 1.序列化:将内存数据转成字符串加以保存. 2.反序列化:将字符串转成内存数据加以读取. data = { '北京':{ '五道口':{ 'sohu':'引擎', } } } ...

  2. Postman之token动态获取

    目前项目涉及PC及APP端接口共用问题,后台接口给登陆后的用户设置了一个token,接口调用时请求头的参数值必须要动态生成,为了解决这个问题,查看Postman API文档,配置了可以方便后端开发者的 ...

  3. JavaWeb之JSP入门

    JSP原理及执行过程 流程图分析 用户发起请求,用户通过浏览器访问jsp页面,浏览器将HTTP协议的请求部分发送到服务端. 服务端获取请求部分,分析请求,发现本次的请求的的是jsp页面,jsp引擎按照 ...

  4. 【poj1679】The Unique MST

    [题目大意] 共T组数据,对于每组数据,给你一个n个点,m条边的图,设图的最小生成树为MST,次小生成树为ans,若MST=ans,输出Not Unique!,否则输出MST [题解] 很明确,先求M ...

  5. 基于rank的优化

    ------------------siwuxie095                                 基于 rank 的优化         基于 size 的优化,在大多数情况下 ...

  6. 使用Apache IO库操作IO与文件

    --------------siwuxie095                         首先到 Apache官网 下载相关的库文件     Apache官网:http://www.apach ...

  7. 2-chrome无法添加扩展程序

    1.更多工具->拓展程序->打开开发者模式->重启浏览器 2.将拓展程序拖入,确认安装

  8. 17-pow(c++)

    C++中有封装的pow()可以直接调用,头文件math,同时对函数进行了重载,支持多种参数格式: double pow (double base , double exponent); float p ...

  9. Python Lambda 的简单用法

    下面代码简单举例介绍以下 lambda的用法. from functools import reduce #1 python lambda会创建一个函数对象,但不会把这个函数对象赋给一个标识符,而de ...

  10. ORACLE_ERP帐务分录

      ORACLE MRPII各模块会计分录   第一章 采购模块 一.资产采购(科目来源:库存组织) 1.物料接收 借  材料采购     接收数量*采购单价 贷 应计暂估     接收数量*采购单价 ...