Html锚点定位偏差计算解决插件
/*=============== 以下为HTML中的锚点代码 =====================*/
<div id="fixedNavBar" class="clearfix collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="page-scroll home">
<a id="introduceBtn" href="#introduce" class="color-d3d3d3 hover">个人介绍</a>
</li>
<li class="page-scroll">
<a id="experienceBtn" href="#experience" class="color-d3d3d3">科研经历</a>
</li>
<li class="page-scroll">
<a id="studyBtn" href="#study" class="color-d3d3d3">研究成果</a>
</li>
<li class="page-scroll">
<a id="patentBtn" href="#patent" class="color-d3d3d3">技术专利</a>
</li>
<li class="page-scroll">
<a id="societyBtn" href="#society" class="color-d3d3d3">社会活动</a>
</li>
</ul>
</div>
/*========== =========以下为JS脚本=== =============*/
(function ($) {
$.fn.scrolld = function (options) {
var scrolldCustom = 0; // Set 'scrolldCustom' value here | Additional distance (+-) on scrolldTop & scrolldPre
var $win=$(window);var doc=document;var y=$win.scrollTop();var h=$win.height();var x=$win.width();var htmlBody=$("html, body");$win.scroll(function(a){y=$win.scrollTop();a.stopImmediatePropagation();return false});$win.resize(function(a){h=$win.height();x=$win.width();a.stopImmediatePropagation();return false});$.easing.scrolldEasing1=function(f,g,e,k,j){var i=(g/=j)*g;var a=i*g;return e+k*(-3.6*a*i+4.3*i*i+0.2*a+0.1*i)};$.easing.scrolldEasing2=function(f,g,e,k,j){var i=(g/=j)*g;var a=i*g;return e+k*(18.9925*a*i+-45.23*i*i+40.28*a+-19.89*i+6.8475*g)};$.easing.scrolldEasing3=function(e,f,a,i,g){if((f/=g)<(1.25/3)){return i*(9.5625*f*f)+a}else{if(f<(2.25/3)){return i*(8.5625*(f-=(1.5/2.75))*f+0.85)+a}else{if(f<(2.75/3)){return i*(7.5625*(f-=(2.25/2.75))*f+0.9375)+a}else{return i*(5.5625*(f-=(2.625/2.75))*f+1)+a}}}};var speed1=100;var speed2=200;var speed3=300;var speed4=400;var speed5=500;var speed6=600;var speed7=700;var speed8=800;var speed9=900;var speed10=1000;var speed11=1100;var speed12=1200;var speed13=1300;var speed14=1400;var speed15=1500;var speed16=1600;var speed17=1700;var speed18=1800;var speed19=1900;var speed20=2000;var speedX=3000;var idScroll=$(this).attr("id");var scrolldNavBar="fixedNavBar";var scrolldMobileNavBar="fixedNavBar";var scrolldFixed=$("#"+scrolldNavBar).innerHeight();var scrolldMobileFixed=$("#"+scrolldMobileNavBar).outerHeight();var idScrollElement=$("#"+idScroll);var idScrollString=idScroll.substr(0,idScroll.length-3);var idScrollDiv=document.getElementById(idScrollString).id;var idScrollDivElement=$("#"+idScrollDiv);var offsetDivElementTop=Math.round(idScrollDivElement.offset().top);var idScrollDivElementHeight=Math.round(idScrollDivElement.height());var scrolldTop=offsetDivElementTop+scrolldCustom;var scrolldTopFixed=Math.round(offsetDivElementTop-scrolldFixed)+scrolldCustom;var scrolldPre=offsetDivElementTop-Math.round(h/15)+scrolldCustom;var scrolldPreFixed=offsetDivElementTop-scrolldFixed-Math.round(h/20)+scrolldCustom;var scrolldCenter=offsetDivElementTop-Math.round(h/2-idScrollDivElementHeight/2);var scrolldMobileTopFixed=Math.round(offsetDivElementTop-scrolldMobileFixed)+scrolldCustom;var scrolldMobilePreFixed=offsetDivElementTop-scrolldMobileFixed-Math.round(h/20)+scrolldCustom;var scrolldDistance=scrolldTop;var scrolldDistanceMin=scrolldTop;var scrolldSpeed=500;var scrolldEasing="scrolldEasing1";var scrolldFixed=true;var scrolldMobile=true;var scrolldMobileWidth=979;var scrolldMobileDistance=scrolldTop;var scrolldMobileDistanceMin=scrolldTop;var scrolldMobileSpeed=500;var scrolldMobileEasing="scrolldEasing1";var scrolldMobileFixed=true;
var // Set Custom Scrolld.js Settings Here:
defaults = {
/// Set Web Settings
scrolldDistance: scrolldTop,
scrolldDistanceMin: scrolldTop,
scrolldSpeed: speed9,
scrolldEasing: 'scrolldEasing1',
scrolldFixed: true,
scrolldNavBar: fixedNavBar,
/// Set Mobile Settings
scrolldMobile: true,
scrolldMobileWidth: 979,
scrolldMobileDistance: scrolldTop,
scrolldMobileDistanceMin: scrolldTop,
scrolldMobileSpeed: speed9,
scrolldMobileEasing: 'scrolldEasing1',
scrolldMobileFixed: true,
scrolldMobileNavBar: fixedNavBar
},
settings = $.extend({}, defaults, options);
this.each(function () {
if($(this).attr("id")!=""){var $this=$(this);if(settings.scrolldDistance){scrolldDistance=settings.scrolldDistance}if(settings.scrolldDistanceMin){scrolldDistanceMin=settings.scrolldDistanceMin}if(settings.scrolldSpeed){scrolldSpeed=settings.scrolldSpeed}if(settings.scrolldEasing){scrolldEasing=settings.scrolldEasing}if(settings.scrolldFixed){scrolldFixed=settings.scrolldFixed}if(settings.scrolldNavBar){scrolldNavBar=settings.scrolldNavBar}if(settings.scrolldMobileNavBar){scrolldMobileNavBar=settings.scrolldMobileNavBar}if(settings.scrolldMobile){scrolldMobile=settings.scrolldMobile}if(settings.scrolldMobileWidth){scrolldMobileWidth=settings.scrolldMobileWidth}if(settings.scrolldMobileDistance){scrolldMobileDistance=settings.scrolldMobileDistance}if(settings.scrolldMobileDistanceMin){scrolldMobileDistanceMin=settings.scrolldMobileDistanceMin}if(settings.scrolldMobileSpeed){scrolldMobileSpeed=settings.scrolldMobileSpeed}if(settings.scrolldMobileEasing){scrolldMobileEasing=settings.scrolldMobileEasing}if(settings.scrolldMobileFixed){scrolldMobileFixed=settings.scrolldMobileFixed}if($this.hasClass("linear")){scrolldEasing="linear"}if($this.hasClass("linearMobile")){scrolldMobileEasing="linear"}if($this.hasClass("swing")){scrolldEasing="swing"}if($this.hasClass("swingMobile")){scrolldMobileEasing="swing"}if($this.hasClass("jswing")){scrolldEasing="jswing"}if($this.hasClass("jswingMobile")){scrolldMobileEasing="jswing"}if($this.hasClass("easeInQuad")){scrolldEasing="easeInQuad"}if($this.hasClass("easeInQuadMobile")){scrolldMobileEasing="easeInQuad"}if($this.hasClass("easeOutQuad")){scrolldEasing="easeOutQuad"}if($this.hasClass("easeOutQuadMobile")){scrolldMobileEasing="easeOutQuad"}if($this.hasClass("easeInOutQuad")){scrolldEasing="easeInOutQuad"}if($this.hasClass("easeInOutQuadMobile")){scrolldMobileEasing="easeInOutQuad"}if($this.hasClass("easeInCubic")){scrolldEasing="easeInCubic"}if($this.hasClass("easeInCubicMobile")){scrolldMobileEasing="easeInCubic"}if($this.hasClass("easeOutCubic")){scrolldEasing="easeOutCubic"}if($this.hasClass("easeOutCubicMobile")){scrolldMobileEasing="easeOutCubic"}if($this.hasClass("easeInOutCubic")){scrolldEasing="easeInOutCubic"}if($this.hasClass("easeInOutCubicMobile")){scrolldMobileEasing="easeInOutCubic"}if($this.hasClass("easeInQuart")){scrolldEasing="easeInQuart"}if($this.hasClass("easeInQuartMobile")){scrolldMobileEasing="easeInQuart"}if($this.hasClass("easeOutQuart")){scrolldEasing="easeOutQuart"}if($this.hasClass("easeOutQuartMobile")){scrolldMobileEasing="easeOutQuart"}if($this.hasClass("easeInOutQuart")){scrolldEasing="easeInOutQuart"}if($this.hasClass("easeInOutQuartMobile")){scrolldMobileEasing="easeInOutQuart"}if($this.hasClass("easeInQuint")){scrolldEasing="easeInQuint"}if($this.hasClass("easeInQuintMobile")){scrolldMobileEasing="easeInQuint"}if($this.hasClass("easeOutQuint")){scrolldEasing="easeOutQuint"}if($this.hasClass("easeOutQuintMobile")){scrolldMobileEasing="easeOutQuint"}if($this.hasClass("easeInOutQuint")){scrolldEasing="easeInOutQuint"}if($this.hasClass("easeInOutQuintMobile")){scrolldMobileEasing="easeInOutQuint"}if($this.hasClass("easeInSine")){scrolldEasing="easeInSine"}if($this.hasClass("easeInSineMobile")){scrolldMobileEasing="easeInSine"}if($this.hasClass("easeOutSine")){scrolldEasing="easeOutSine"}if($this.hasClass("easeOutSineMobile")){scrolldMobileEasing="easeOutSine"}if($this.hasClass("easeInOutSine")){scrolldEasing="easeInOutSine"}if($this.hasClass("easeInOutSineMobile")){scrolldMobileEasing="easeInOutSine"}if($this.hasClass("easeInExpo")){scrolldEasing="easeInExpo"}if($this.hasClass("easeInExpoMobile")){scrolldMobileEasing="easeInExpo"}if($this.hasClass("easeOutExpo")){scrolldEasing="easeOutExpo"}if($this.hasClass("easeOutExpoMobile")){scrolldMobileEasing="easeOutExpo"}if($this.hasClass("easeInOutExpo")){scrolldEasing="easeInOutExpo"}if($this.hasClass("easeInOutExpoMobile")){scrolldMobileEasing="easeInOutExpo"}if($this.hasClass("easeInCirc")){scrolldEasing="easeInCirc"}if($this.hasClass("easeInCircMobile")){scrolldMobileEasing="easeInCirc"}if($this.hasClass("easeOutCirc")){scrolldEasing="easeOutCirc"}if($this.hasClass("easeOutCircMobile")){scrolldMobileEasing="easeOutCirc"}if($this.hasClass("easeInOutCirc")){scrolldEasing="easeInOutCirc"}if($this.hasClass("easeInOutCircMobile")){scrolldMobileEasing="easeInOutCirc"}if($this.hasClass("easeInElastic")){scrolldEasing="easeInElastic"}if($this.hasClass("easeInElasticMobile")){scrolldMobileEasing="easeInElastic"}if($this.hasClass("easeOutElastic")){scrolldEasing="easeOutElastic"}if($this.hasClass("easeOutElasticMobile")){scrolldMobileEasing="easeOutElastic"}if($this.hasClass("easeInOutElastic")){scrolldEasing="easeInOutElastic"}if($this.hasClass("easeInOutElasticMobile")){scrolldMobileEasing="easeInOutElastic"}if($this.hasClass("easeInBack")){scrolldEasing="easeInBack"}if($this.hasClass("easeInBackMobile")){scrolldMobileEasing="easeInBack"}if($this.hasClass("easeOutBack")){scrolldEasing="easeOutBack"}if($this.hasClass("easeOutBackMobile")){scrolldMobileEasing="easeOutBack"}if($this.hasClass("easeInOutBack")){scrolldEasing="easeInOutBack"}if($this.hasClass("easeInOutBackMobile")){scrolldMobileEasing="easeInOutBack"}if($this.hasClass("easeInBounce")){scrolldEasing="easeInBounce"}if($this.hasClass("easeInBounceMobile")){scrolldMobileEasing="easeInBounce"}if($this.hasClass("easeOutBounce")){scrolldEasing="easeOutBounce"}if($this.hasClass("easeOutBounceMobile")){scrolldMobileEasing="easeOutBounce"}if($this.hasClass("easeInOutBounce")){scrolldEasing="easeInOutBounce"}if($this.hasClass("easeInOutBounceMobile")){scrolldMobileEasing="easeInOutBounce"}if($this.hasClass("scrolldEasing1")){scrolldEasing="scrolldEasing1"}if($this.hasClass("scrolldEasing1Mobile")){scrolldMobileEasing="scrolldEasing1"}if($this.hasClass("scrolldEasing2")){scrolldEasing="scrolldEasing2"}if($this.hasClass("scrolldEasing2Mobile")){scrolldMobileEasing="scrolldEasing2"}if($this.hasClass("scrolldEasing3")){scrolldEasing="scrolldEasing3"}if($this.hasClass("scrolldEasing3Mobile")){scrolldMobileEasing="scrolldEasing3"}if(x<scrolldMobileWidth){if(scrolldMobile===true&&scrolldMobileFixed===false){if(h<=idScrollDivElementHeight){htmlBody.stop(true).animate({scrollTop:scrolldMobileDistanceMin},scrolldMobileSpeed,scrolldMobileEasing)}else{htmlBody.stop(true).animate({scrollTop:scrolldMobileDistance},scrolldMobileSpeed,scrolldMobileEasing)}}else{if(scrolldMobile===true&&scrolldMobileFixed===true){if(h<=(idScrollDivElementHeight+(scrolldMobileFixed*2))&&scrolldMobileDistanceMin===scrolldTop){htmlBody.stop(true).animate({scrollTop:scrolldTopFixed},scrolldMobileSpeed,scrolldMobileEasing)}else{if(h<=(idScrollDivElementHeight+(scrolldMobileFixed*2))&&scrolldMobileDistanceMin===scrolldPre){htmlBody.stop(true).animate({scrollTop:scrolldPreFixed},scrolldMobileSpeed,scrolldMobileEasing)}else{if(h<=(idScrollDivElementHeight+(scrolldMobileFixed*2))&&scrolldMobileDistanceMin===scrolldCenter){htmlBody.stop(true).animate({scrollTop:scrolldCenter},scrolldMobileSpeed,scrolldMobileEasing)}else{if(h>(idScrollDivElementHeight+(scrolldMobileFixed*2))&&scrolldMobileDistance===scrolldTop){htmlBody.stop(true).animate({scrollTop:scrolldTopFixed},scrolldMobileSpeed,scrolldMobileEasing)}else{if(h>(idScrollDivElementHeight+(scrolldMobileFixed*2))&&scrolldMobileDistance===scrolldPre){htmlBody.stop(true).animate({scrollTop:scrolldPreFixed},scrolldMobileSpeed,scrolldMobileEasing)}else{if(h>(idScrollDivElementHeight+(scrolldMobileFixed*2))&&scrolldMobileDistance===scrolldCenter){htmlBody.stop(true).animate({scrollTop:scrolldCenter},scrolldMobileSpeed,scrolldMobileEasing)}else{htmlBody.stop(true).animate({scrollTop:scrolldMobileDistance},scrolldMobileSpeed,scrolldMobileEasing)}}}}}}}}}if(x>=scrolldMobileWidth){if(scrolldFixed===false){if(h<=idScrollDivElementHeight){htmlBody.stop(true).animate({scrollTop:scrolldDistanceMin},scrolldSpeed,scrolldEasing)}else{htmlBody.stop(true).animate({scrollTop:scrolldDistance},scrolldMobileSpeed,scrolldMobileEasing)}}else{if(scrolldFixed===true){if(h<=(idScrollDivElementHeight+scrolldFixed)&&scrolldDistanceMin===scrolldTop){htmlBody.stop(true).animate({scrollTop:scrolldTopFixed},scrolldSpeed,scrolldEasing)}else{if(h<=(idScrollDivElementHeight+scrolldFixed)&&scrolldDistanceMin===scrolldPre){htmlBody.stop(true).animate({scrollTop:scrolldPreFixed},scrolldSpeed,scrolldEasing)}else{if(h<=(idScrollDivElementHeight+scrolldFixed*2)&&scrolldDistanceMin===scrolldCenter){htmlBody.stop(true).animate({scrollTop:scrolldCenter},scrolldSpeed,scrolldEasing)}else{if(h>(idScrollDivElementHeight+scrolldFixed)&&scrolldDistance===scrolldTop){htmlBody.stop(true).animate({scrollTop:scrolldTopFixed},scrolldSpeed,scrolldEasing)}else{if(h>(idScrollDivElementHeight+scrolldFixed)&&scrolldDistance===scrolldPre){htmlBody.stop(true).animate({scrollTop:scrolldPreFixed},scrolldSpeed,scrolldEasing)}else{if(h>(idScrollDivElementHeight+scrolldFixed*2)&&scrolldDistance===scrolldCenter){htmlBody.stop(true).animate({scrollTop:scrolldCenter},scrolldSpeed,scrolldEasing)}else{htmlBody.stop(true).animate({scrollTop:scrolldDistance},scrolldSpeed,scrolldEasing)}}}}}}}}}};
});
return this;
}
})(jQuery);
/*===================以下为调用方式==========================*/
$("[id*='Btn']").stop(true).on('click', function (e) { e.preventDefault(); $(this).scrolld(); });
Html锚点定位偏差计算解决插件的更多相关文章
- 【TRICK】解决锚点定位向下浮动Xpx问题
1. 问题描述 页面滚动后,菜单栏会固定在页头,当锚点定位时,菜单会遮盖部分定位后的内容,所以需要在锚点定位后自动向下漂移Xpx. 2. 解决办法 a. 利用空div 占位,如下: <a hre ...
- 当锚点定位遇上position: fixed
<!DOCTYPE html><html> <head> <title>当锚点定位遇上position: fixed</title> < ...
- Android tabLayout+recyclerView实现锚点定位
原文链接:https://mp.weixin.qq.com/s/L3o2i3WTmg1ScXEYDS8YCg 在上一篇文章 Android 实现锚点定位中,我们介绍了tablayout+scrollV ...
- Android 实现锚点定位
相信做前端的都做过页面锚点定位的功能,通过<a href="#head"> 去设置页面内锚点定位跳转. 本篇文章就使用tablayout.scrollview来实现an ...
- legend2---开发日志5(如何解决插件的延迟问题,比如vue)
legend2---开发日志5(如何解决插件的延迟问题,比如vue) 一.总结 一句话总结:元素可以先设置为隐藏,这样就不会让用户看到延迟的问题,然后等加载完再显示, 元素先设置为隐藏 加载完再显示 ...
- html中设置锚点定位的几种常见方法(#号定位)
在html中设置锚点定位我知道的有几种方法,在此和大家分享一下: 1.使用id定位: <a href="#1F">锚点1</a> <div id=&q ...
- 锚点定位,jquery定位到页面指定位置
jquery锚点定位 $('body,html').animate({scrollTop: $('#ter1').offset().top}, 500);#ter1是你要定位的id对象,500是0.5 ...
- js实现锚点定位
js实现锚点定位的原理是,算出定位的标签距离顶部的高度,点击触发标签,重新赋值滚动条的高度到达指定位置. <!DOCTYPE html> <html> <head> ...
- html锚点定位不准确问题
问题描述 当顶部固定时,点击锚点,会跳转到锚点以下. <style> #one,#two,#three{ height: 500px; } #top{ position: fixed; h ...
随机推荐
- 使用自定义签名的https的ssl安全问题解决和metro的webservice调用
最近一直在忙新的项目,每天加班到8点多,都没来写博客了.新的项目遇到了很多问题,现在趁着突然停电来记录下调用https的问题吧. 我们服务主要是,我们调用数据源数据,并且再提供接口供外部数据调用. 我 ...
- 接口测试第十二课(fidller过滤)(转)
转自: 经常有人问我,如何只抓手机上某个应用的请求包?在使用fiddler抓手机包的过程中,fiddler会话框上瞬间就满屏了,因为它不仅抓到手机上的请求数据包,也抓到了PC端的网络请求包.这时候很难 ...
- xutils3
使用方法:https://github.com/wyouflf/xUtils3 http://blog.csdn.net/tyk9999tyk/article/details/53306035 .Ne ...
- jquey知识点整理
jquery选择器 1.元素选择器: $("p") 选取 <p> 元素. $("p.intro") 选取所有 class="intro&q ...
- c++打开浏览器
调用外部命令 如果用默认浏览器,就调用ShellExecute(NULL, _T("open"), _T("explorer.exe"), _T("h ...
- 在AngularJS中同一个页面配置一个或者多个ng-app
在AngularJS学习中,对于ng-app初始化一个AngularJS程序属性的使用需要注意,在一个页面中AngularJS自动加载第一个ng-app,其他ng-app会忽略, 如果需要加载其他ng ...
- div css 自适应
怎样实现响应式布局? 对于这个问题,我们可以通过CSS3中的Media Query来实现,即媒介查询.媒体查询让CSS可以更精确作用于不同的媒体类型和同一媒体的不同条件.媒体查询的大部分媒体特性都接受 ...
- 阅读笔记 火球UML大战需求分析3
在复习回顾的以前所学的UML 统一建模语言之后,要将他们融会贯通起来,必定要进行一次事件,这样才能更好地运用各种UML,所以,了解了所有的UML图之后,就要开始接收一个练习的项目了. 这里作者给的例子 ...
- alert效果
<!DOCTYPE html> <head> <meta charset="utf-8" /> <title>拉伸效果</ti ...
- 微信小程序-视图事件
事件 什么是事件 事件是视图层到逻辑层的通讯方式. 事件可以将用户的行为反馈到逻辑层进行处理. 事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数. 事件对象可以携带额外信息,如 ...