使锚链接在 id 上方一些像素

Question

I'm currently working on a website and I'm having a trouble with anchors. My header is fixed and when I click on anchor it sends me on other page how it is supposed to be, but I'm missing 80 pixels which is height of my fixed header. There is a script that made accordion opened on new page when I click on anchor but it should scroll 80px less... here is some code I have over there in my .jsp file

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

and there is a .js that makes my accordion opened on the new page

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

I think that you guys will need more info, so ask me anything that could help you. I'm new in this and I don't even know which code should I post here to help you guys realize what the problem is... Thank you (:

Answer 1

One common way is to add an invisible pseudo element to the original target element of the link via CSS, like this:

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

This will "extend" the element with that ID in a way which causes the anchor to be 80px above the main element, without causing any other visible changes.

Answer 2

Another idea is to use smooth scrolling with an offset. (View the example "Full Page" by clicking that link at top right of the snippet window)

 $("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 (eg 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>

Example code ripped off from:

w3schools Company Theme example