解决锚点链接跳转后位置上下偏移的偏移的办法

CSS 同时被 3 个专栏收录
6 篇文章 0 订阅
11 篇文章 1 订阅
19 篇文章 0 订阅

应用场景:我们把导航固定在页面顶部的时候,点击锚链接跳转到相应的部分时,很可能导航把页面的内容覆盖了,像这样

导航把文字覆盖了, 原因就是我们设置了padding这类css属性 正常盒模型的宽度:width=width+padding+border,其实就是导航盖住了盒模型的padding,覆盖原因就不过多解释了。我们还是说下解决办法

问题:既然是锚链接,要跳转,就要用href呀,同时,不可避免的就是a链接的默认行为,遇到href="#",页面就瞬间回到顶部,那我们能不能想一个办法,既能锚点链接跳转,又能避免a链接的默认跳转呢?

我的页面,a也有href="#",试了网上各种解决办法,都不能解决问题,有的还是用插件来控制,额一脸嫌弃 ̄へ ̄ ,杀鸡焉用宰牛刀哇,用别人现成的东西总是觉得膈应,体现不出我们的逼格呀,怎么办呢,最后我想到个简单的办法解决这个bug。

好吧,我知道说大话会被人笑的,但是我还是非常自信地推荐下面这种我想出来的,锚点链接跳转后位置上下偏移的解决办法。非常简单,非常易懂,出错率低,上手方便,兼容性上佳!

办法就是:给a设置了一个新属性navTo,就是这货了

HTML:通过给a设置了一个navTo属性,属性值就是需要跳转到的部分的id值,比如navTo="services",对应的,需要跳转到的部分:div id=“services”,这样就可以跳转了,当然现在是有偏移的, 但是a链接的默认跳转行为我们就避免了,比如回到顶部去。

  (~ ̄▽ ̄)~

<li class="ly_active">
	<a href="javascript:;" class="navItems" navTo="#"> 网站首页</a>
</li>
<li>
	<a href="javascript:;" class="navItems" navTo="services">服务与支持</a>
</li>

JS部分:分类处理,navTo="#"和navTo=name。没有啥是if else解决不了的事情,如果有那就elseif,哈哈哈

$('.navItems').click(function() {
	var navto = $(this).attr('navto');
	if(navto != "#") {
		var $div = $('#' + navto);
		var top = $div.offset().top || 0;
		$('html,body').animate({
			'scroll-top': top - 70
			}, 500);
	} else {
	    $('html,body').animate({
			'scroll-top': 0
		   }, 500);

		}

	});

对,解决办法就是这6行代码,嘻嘻~这个办法有几个好处,什么好处呢,还没看出来?木有关系,看了别人的解决办法你就知道俺的好在哪里了。

下面说说网上的两种解决办法吧,我都尝试了一下,都出现了不同的问题,一起来看一下吧。

第一种,使用css将锚点偏移:测试过了,这种针对含有href=“”#“”的锚点内容无效 

html:

<a class="target-fix" ></a>
<artivle>主体内容...</article>

css如下:

.target-fix {
    position: relative;
    top: -44px; /*偏移值*/
    display: block;
    height: 0;
    overflow: hidden;
}

因为样式内部有相对定位,而针对我的页面元素,bootstrap样式内本来就有定位了,用了这个,页面布局乱了不说还不好维护,果断放弃。

第二种,onhashchange,绑定window.onhashchange事件

这种办法对含有“#”的锚链接废了,当a标签的href=#时,点击这个链接,页面会嗖的一下回到顶部,没有滑动的感觉了~~还有另一个bug就是,点击导航,页面跳转的时候,页面只会从上往下滑动,很坑爹是不是,哈哈那是因为a链接搞出的幺蛾子,所以我才就没用a标签默认的href来跳转吖

   /* 绑定事件*/
        window.onhashchange=function(){
            var target = $(location.hash);
            if(target.length==1){
                 var top = target.offset().top-44;
                 if(top > 0){
                     $('html,body').animate({scrollTop:top}, 1000);
                 }
             } 
        }
        /* 触发事件 */
       onhashchange();

我这个页面是练手写的,效果预览:https://luoyu6.github.io/xfc_master/index.html

最后,说句实在话,我知道这应该不算什么新颖的办法,在我之前想到这种方法的人肯定不在少数,但是留迹于网上的却没有,我是没有发现过。不清楚是大牛公司要求技术保密,还是自身不愿分享研究成果。我相信不是这样的,主要还是他们很忙碌

  • 6
    点赞
  • 10
    评论
  • 11
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值