a标签锚点位置偏移(页面顶部有fix header)

写页面的时候,用到了锚点链接<a href="#section1"></a>,但是发现点击a到对应的section的时候,不能到section的上面,会到section中的某个位置,一开始我以为是元素内容部的margin或者h1的问题,后来通过console.log()输出高度等发现了原因:最上面的nav 加了属性position:fixed的原因———虽然元素被fixed在最上面了,可是页面计算section的页边距top的时候还是把nav的高度算上去了,所以点击锚点链接的时候,偏移的距离是section页边距的高度加上nav的高度( section.offset().top + nav.height)。解决方法如下: 
我们要让网页的位置再向下偏移一小段距离(原版在这里https://segmentfault.com/q/1010000000124208)。即 
(1)在<section>前面再加一个<a class="target-fix">作为暗锚,将这个锚点进行偏移:(最直接的方法)

.target-fix {
    position: relative;
    top: -60px; // 偏移为nav被fixed元素的高度
    display: block;
    height: 0; //高度为0
    overflow: hidden;
}

HTML:

<a id="section1" class="target-fix"></a> /*暗锚*/

<div  class="max1440 "> /*正文div*/

</div>


(2)对于支持css3的:target声明可以这样:(需要现代浏览器支持,IE落后浏览器不支持)

article.a-post:target{
    padding-top:44px;
}

或者直接给section设定一个类.section, 然后设定每个section的padidng-top值(设置marign-top没用噢,只能padding值,道理你懂的)。

(3)用jquery去调整scroll解决:

$(function(){
  if(location.hash){
     var target = $(location.hash);
     if(target.length==1){
         var top = target.offset().top-44;
         if(top > 0){
             $('html,body').animate({scrollTop:top}, 1000);
         }
     }
  }
});

或者jquery的jquery-hashchange,绑定window.onhashchange事件:

$(function(){
        /* 绑定事件*/
        $(window).hashchange(function(){
            var target = $(location.hash);
            if(target.length==1){
                 var top = target.offset().top-44;
                 if(top > 0){
                     $('html,body').animate({scrollTop:top}, 1000);
                 }
             } 
        });
        /* 触发事件 */
        $(window).hashchange();
});
————————————————
版权声明:本文为CSDN博主「changreal」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/changreal/article/details/51039010

在Vue中解决a标签锚点跳转位置上下偏移的方法有很多种,下面我将介绍几种常用的方法。 1. 使用Vue Router的滚动行为功能。在Vue Router中,可以通过设置scrollBehavior属性来控制页面滚动行为。可以通过给目标路由设置一个滚动偏移量来实现锚点跳转时的位置偏移。例如: ```javascript const router = new VueRouter({ mode: 'hash', // 或者其他模式 ... scrollBehavior(to, from, savedPosition) { if (to.hash) { return { selector: to.hash, offset: { x: 0, y: 100 } // 设置纵向偏移量为100px } } } }) ``` 2. 在目标元素上通过ref属性标记,并通过Vue的$refs来操作元素。在Vue的模板中,可以使用ref属性来标记元素,然后可以通过Vue实例的$refs属性来获取到元素的实例,并进行操作。例如: ```html <!-- 模板 --> <a href="#target" @click="scrollToTarget">跳转到目标</a> ... <div ref="target" id="target">目标元素</div> <!-- Vue 实例中的方法 --> methods: { scrollToTarget() { const targetElement = this.$refs.target // 进行滚动操作,可以通过scrollTop属性或者其他滚动方法来控制滚动位置,再加上偏移量即可 } } ``` 3. 使用第三方库来实现滚动行为。除了Vue Router,还有一些第三方库可以用于处理滚动行为,如vue-scrollto、vue-scroll-behavior等。这些库提供了方便的API,可以轻松地控制滚动位置偏移量。可以根据具体需求选择合适的库使用。 总的来说,以上是几种常见的在Vue中解决a标签锚点跳转位置上下偏移的方法。具体的使用方式可以根据实际需求选择合适的方法来实现相应的效果。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值