Question

我目前正在网站上工作，而且我遇到了锚点问题。我的标题是固定的，当我点击锚点时，它会在其他页面上向我发送它应该如何，但是我错过了80像素，这是我固定标题的高度。有一个脚本在我点击锚点时在新页面上打开了手风琴但它应该滚动80px更少...这里是我在.jsp文件中的一些代码

 <a href="${parentLink}#${menuItem.name}" class="${menuItem.classes[anchorClasses]}">

并且有一个.js让我的手风琴在新页面上打开

$(document).ready(function () {
    if (location.hash != null && location.hash != "") {
        $('.collapse').removeClass('in');
        $(location.hash + '.collapse').collapse('show');
    }
});

我认为你们需要更多信息，所以问我任何有用的东西。我是新手，我甚至不知道应该在这里发布哪些代码来帮助你们了解问题所在...谢谢（：

Answer 1

一种常见的方法是通过CSS将不可见的伪元素添加到链接的原始目标元素，如下所示：

#your_anchor_id::before { 
  display: block; 
  content: " "; 
  margin-top: -80px; 
  height: 80px; 
  visibility: hidden; 
  pointer-events: none;
}

这将＆＃34;延伸＆＃34;具有该ID的元素，其方式使锚点在主元素上方80px，而不会引起任何其他可见的更改。

Answer 2

另一个想法是使用带有偏移量的平滑滚动。 （通过单击代码段窗口右上方的链接来查看“整页”示例）

$("nav ul li a").on('click', function(event) {
    if (this.hash !== "") {
        var myOffset = $('#myOff').val(); //get value from input (offset value)
        if (myOffset==='') $('input').addClass('alert');

        event.preventDefault(); // Prevent default anchor click behavior
        var hash = this.hash; // Store hash
      
        // jQuery animate() method for smooth page scroll
        // 900 is the number of ms to scroll to the specified area
        $('html, body').animate({
            scrollTop: $(hash).offset().top - myOffset
        }, 900);
    } // End if
});

//$('div:contains(Section)').css('font-weight','bold');

html,body{margin:0;padding:0;font-family:Calibri;}
body{height:2500px;}
ul,li{margin:0;padding:0;}
*{box-sizing:border-box;}
section{
  display: grid;
  place-items: center;
  width: 100%;
  height: 500px;
}
nav{position:fixed;width:80vw;background:white;border:1px solid red;}
::placeholder{color:#ccc;}
nav ul li{
  display: inline-block;
  padding:0;
  border: 1px solid rgba(200,200,200,0.3);
}
nav ul li:hover{background: #ddd;}
a{text-decoration:none;padding:10px 25px;display:inline-block;}

#one{background:palegreen; padding:50px;}
#two{background:palegoldenrod;}
#twa{background:lightblue;}
#fer{height:1500px;}
.alert{border:1px solid red;background:#ffc0cb99;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav>
  <ul>
    <li>NAV / HEADER:</li>
    <li><a href="#one">One</a></li>
    <li><a href="#two">Two</a></li>
    <li><a href="#twa">Three</a></li>
    <li><input id="myOff" type="text" placeholder="Offset (e.g. 75):" /></li>
  </ul>
</nav>
<section id="one">
  <div>
    <div style="text-align:center">Section One</div>
    <div>Directions:<br>(a) View as Full Page (link at top right)<br>(b) Enter offset number (for how many pixels the smooth-scroll will stop short)<br>(c) Click nav "Two" or "Three" and observe<br>(4) Repeat using a different offset value<br>Note: The fixed header is deliberately not full width in order to show the top of the next section scrolling UNDER the header (undesireable) The offset prevents that, and is what you are asking about.</div>
  </div>
</section>
<section id="two">
  Section Two
</section>
<section id="twa">
  Section Three
</section>
<section id="fer">
  Section Four
</section>

示例代码摘自：

w3schools Company Theme example

使锚链接高于id一些像素

2 个答案: