Scroll hash offset with CSS & jQuery

0 votes
282 views
added Apr 17, 2019 in Plugins by LC Marshal Captain (25,790 points)
<!--HTML-->

<!--anchor area-->
<div class="hash-offset" id="titleanchor"></div>
<h3>Title goes here</h3>

<!--link-->
<div class="floating-bar">
  <a href="#titleanchor"><div class="floating-menu">link to title</div></a>
</div>

 

/*CSS*/
.hash-offset {
  display: block;
  position: relative;
  top: -70px;
  visibility: hidden;
}

 

$(".floating-bar a[href^='#']").click(function(e) {
  e.preventDefault();
  
  var position = $($(this).attr("href")).offset().top;

  $("body, html").animate({
    scrollTop: position
  } /* speed */ );
});

 

lazacode.org - Malaysia's programming knowledge sharing platform, where everyone can share their finding as reference to others.
...