zoukankan      html  css  js  c++  java
  • 点击带锚点的网址后,将网页向下偏移一小段距离

    参照 stackoverflow 的做法,在主体内容前加一个暗锚:

    <a class="target-fix" name="a-<?php $a->id(); ?>"></a>
    <artivle>主体内容...</article>

    将锚点进行偏移,并隐藏占位:

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

    也可以这样,使用javascript去调整scroll值

    if (window.location.hash.indexOf('#') >= 0) {
        $('html,body').animate({
            scrollTop: ($(window.location.hash).offset().top - 50) + "px"
        },
        300);
    }; //主要修复评论定位不准确BUG
    $('#comments a[href^=#][href!=#]').click(function() {
        var target = document.getElementById(this.hash.slice(1));
        if (!target) return;
        var targetOffset = $(target).offset().top - 50;
        $('html,body').animate({
            scrollTop: targetOffset
        },
        300);
        return false;
    }); //主要修复评论定位不准确BUG

    padding-top 会让第二条评论向下偏移50px,但是把回复按钮给遮挡了!导致回复按钮点击不了。反复调整z-index改变层的顺序,仍然无果!

  • 相关阅读:
    node.js中常用的fs文件系统
    秒懂 this
    Filter 过滤器
    Ubuntu 安装zookeeper
    Vmware 设置NAT模式
    TreeMap
    ArrayList扩容
    Java 面试题收集
    SwitchyOmega 设置修改代理
    Jedis操作Redis
  • 原文地址:https://www.cnblogs.com/cheng6018/p/6410615.html
Copyright © 2011-2022 走看看