Html锚点定位偏差计算解决插件

时间:2022-08-29 07:27:35

/*=============== 以下为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锚点定位偏差计算解决插件的更多相关文章

  1. 【TRICK】解决锚点定位向下浮动Xpx问题

    1. 问题描述 页面滚动后,菜单栏会固定在页头,当锚点定位时,菜单会遮盖部分定位后的内容,所以需要在锚点定位后自动向下漂移Xpx. 2. 解决办法 a. 利用空div 占位,如下: <a hre ...

  2. 当锚点定位遇上position&colon; fixed

    <!DOCTYPE html><html> <head> <title>当锚点定位遇上position: fixed</title> &lt ...

  3. Android tabLayout&plus;recyclerView实现锚点定位

    原文链接:https://mp.weixin.qq.com/s/L3o2i3WTmg1ScXEYDS8YCg 在上一篇文章 Android 实现锚点定位中,我们介绍了tablayout+scrollV ...

  4. Android 实现锚点定位

    相信做前端的都做过页面锚点定位的功能,通过<a href="#head"> 去设置页面内锚点定位跳转. 本篇文章就使用tablayout.scrollview来实现an ...

  5. legend2---开发日志5(如何解决插件的延迟问题,比如vue)

    legend2---开发日志5(如何解决插件的延迟问题,比如vue) 一.总结 一句话总结:元素可以先设置为隐藏,这样就不会让用户看到延迟的问题,然后等加载完再显示, 元素先设置为隐藏 加载完再显示 ...

  6. html中设置锚点定位的几种常见方法(&num;号定位)

    在html中设置锚点定位我知道的有几种方法,在此和大家分享一下: 1.使用id定位: <a href="#1F">锚点1</a> <div id=&q ...

  7. 锚点定位,jquery定位到页面指定位置

    jquery锚点定位 $('body,html').animate({scrollTop: $('#ter1').offset().top}, 500);#ter1是你要定位的id对象,500是0.5 ...

  8. js实现锚点定位

    js实现锚点定位的原理是,算出定位的标签距离顶部的高度,点击触发标签,重新赋值滚动条的高度到达指定位置. <!DOCTYPE html> <html> <head> ...

  9. html锚点定位不准确问题

    问题描述 当顶部固定时,点击锚点,会跳转到锚点以下. <style> #one,#two,#three{ height: 500px; } #top{ position: fixed; h ...

随机推荐

  1. zend studio面板功能

    不小心把zend界面右边的显示类中各个方法的窗口关掉了,如何打开呢: 法一:点击Windows菜单,选择show view项,选择outline即可: 法二:点击Windows菜单,选择Reset P ...

  2. Linux基础命令介绍七:网络传输与安全 wget curl rsync iptables

    本篇接着介绍网络相关命令:wget 文件下载工具.curl 网络数据传输工具.rsync 文件传输工具等. 本篇接着介绍网络相关命令 1.wget 文件下载工具 wget [option]... [U ...

  3. 我是如何使用git的

    安装 首先需要安装 msysgit, 下载地址:http://msysgit.github.io/ msysgit提供了Git Bash命令行工具和Git GUI,前者提供了类似linux系统下bas ...

  4. C&num;整理3——运算符和语句

    运算符: 一.算术运算符:+ - * / % ——取余运算 取余运算的应用场景:1.奇偶数的区分. 2.把数变化到某个范围之内.——彩票生成. 3.判断能否整除.——闰年.平年. using Syst ...

  5. Python os与sys模块解析

    os与sys模块的官方解释如下: os: This module provides a portable way of using operating system dependent functio ...

  6. golang对不同系统的编译

    Golang 支持在一个平台下生成另一个平台可执行程序的交叉编译功能. Mac下编译 # mac编译linux执行文件 CGO_ENABLED=0 GOOS=linux GOARCH=amd64 go ...

  7. gcc的调试调研——gdb

    首先来介绍一下gcc的选项: 其他选项都为常用编译选项,在这里介绍一下优化功能: 优化编译时使用选项: -O:可以告诉gcc同时减小代码的长度和执行时间,其效果等价于-O1,在这一级别上能够进行的优化 ...

  8. Memcached技术

    Memcached技术 介绍: memcached是一种缓存技术, 他可以把你的数据放入内存,从而通过内存访问提速,因为内存最快的, memcached技术的主要目的提速, 在memachec 中维护 ...

  9. linux下向一个文件中的某行插入数据的做法

    sed -i 'ni\x' test.file        表示向test.file文件里的第n行的前面添加x内容sed -i 'na\x' test.file       表示向test.file ...

  10. Linux运维之系统性能---vmstat工具分析内存的瓶颈

    为了提高磁盘存取效率, Linux做了一些精心的设计, 除了对dentry进行缓存(用于VFS,加速文件路径名到inode的转换), 还采取了两种主要Cache方式:Buffer Cache和Page ...