Div Anchors Scrolling Too Far

Div anchors scrolling too far

To fix this with CSS you can add a padding to the Elements you want to jump to:

Example

Alternatively, you could add a border:

div{   height: 650px;   background:#ccc;   /*the magic happens here*/  border-top:42px solid #fff;}ul{  top: 0;   width: 100%;   height:20px;   position: fixed;   background: deeppink;   margin:0;  padding:10px; }li{  float:left;  list-style:none;  padding-left:10px;}div:first-of-type{   margin-top:0; }

<!-- content to be placed inside <body>…</body> --><ul>  <li><a href="#s1">link 1</a>  <li><a href="#s2">link 2</a>  <li><a href="#s3">link 3</a>  <li><a href="#s4">link 4</a></ul><div id="s1" class="first">1</div><div id="s2">2</div><div id="s3">3</div><div id="s4">4</div>

ID anchors are scrolling slightly too far

It's most likely the padding causing the issue. Try removing it to see if it corrects itself. If so, then use a div wrapper set to the width you want, and place the contents with the padding inside the div wrapper.

Make anchor link go some pixels above where it's linked to

window.addEventListener("hashchange", function () {
    window.scrollTo(window.scrollX, window.scrollY - 100);
});

This will allow the browser to do the work of jumping to the anchor for us and then we will use that position to offset from.

EDIT 1:

As was pointed out by @erb, this only works if you are on the page while the hash is changed. Entering the page with a #something already in the URL does not work with the above code. Here is another version to handle that:

// The function actually applying the offset
function offsetAnchor() {
    if(location.hash.length !== 0) {
        window.scrollTo(window.scrollX, window.scrollY - 100);
    }
}

// This will capture hash changes while on the page
window.addEventListener("hashchange", offsetAnchor);

// This is here so that when you enter the page with a hash,
// it can provide the offset in that case too. Having a timeout
// seems necessary to allow the browser to jump to the anchor first.
window.setTimeout(offsetAnchor, 1); // The delay of 1 is arbitrary and may not always work right (although it did in my testing).

NOTE:
To use jQuery, you could just replace window.addEventListener with $(window).on in the examples. Thanks @Neon.

EDIT 2:

As pointed out by a few, the above will fail if you click on the same anchor link two or more times in a row because there is no hashchange event to force the offset.

This solution is very slightly modified version of the suggestion from @Mave and uses jQuery selectors for simplicity

// The function actually applying the offset
function offsetAnchor() {
  if (location.hash.length !== 0) {
    window.scrollTo(window.scrollX, window.scrollY - 100);
  }
}

// Captures click events of all <a> elements with href starting with #
$(document).on('click', 'a[href^="#"]', function(event) {
  // Click events are captured before hashchanges. Timeout
  // causes offsetAnchor to be called after the page jump.
  window.setTimeout(function() {
    offsetAnchor();
  }, 0);
});

// Set the offset when entering page with hash present in the url
window.setTimeout(offsetAnchor, 0);

JSFiddle for this example is here

scrollIntoView Scrolls just too far

If it's about 10px, then I guess you could simply manually adjust the containing div's scroll offset like that:

el.scrollIntoView(true);
document.getElementById("containingDiv").scrollTop -= 10;

Scrolling to anchor and make nav fixed

Try this.

var fixmeTop = $('.anchor-links').offset().top;
$(window).scroll(function() {    var currentScroll = $(window).scrollTop();    if (currentScroll >= fixmeTop){        $('.anchor-links').addClass("sticky");    } else {        $('.anchor-links').removeClass("sticky");    }});
$('.goSmoothly').click(function(event){      event.preventDefault();    $(this).addClass('active');    if( $('.anchor-links').hasClass("sticky")) {    $('html,body').animate({        scrollTop: $(this.hash).offset().top - 100    }, 500);    } else {    $('html,body').animate({        scrollTop: $(this.hash).offset().top - 220    }, 500);        }});

.block{    height:700px;    background:#eee;}.anchor-links {  border-bottom: 1px solid #f5f5f5;  border-top: 1px solid #f5f5f5;  margin-bottom: 20px;}.anchor-links .nav-list li {  display: inline-block;  line-height: 4.2rem;}.anchor-links.sticky {  background: #fff none repeat scroll 0 0;  border-bottom: 1px solid #f5f5f5;  left: 0;  position: fixed;  top: 0;  width: 100%;  z-index: 99;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><img width="400" height="400" alt="Adidas 2 Opties" itemprop="image" class="featured" data-original-url="http://static.webshopapp.com/shops/057743/files/029936946/adidas-2-opties.jpg" src="http://static.webshopapp.com/shops/057743/files/029936946/400x400x2/adidas-2-opties.jpg"><div class="anchor-links">    <div class="anchor-wrapper">        <ul class="nav-list">            <li><a href="#description" class="goSmoothly">Product information</a></li>            <li><a href="#bundles" class="goSmoothly">Product bundles</a></li>            <li><a href="#reviews" class="goSmoothly">Reviews</a></li>            <li><a href="#related" class="goSmoothly">Related products</a></li>        </ul>    </div></div>
<div id="description" class="block">description</div><div id="bundles" class="block">bundles</div><div id="reviews" class="block">reviews</div><div id="related" class="block">related</div>

Anchor not scrolling correctly

This is a dup of Div anchors scrolling too far

For the requests to see sample code, I've put a full sample page here: https://gist.github.com/denised/5924370.

The key bit is the presence of two divs (#header and #mainbody) and the following bit of css (which I believe is a fairly standard way to create a fixed header):

#header {
  position:fixed; 
  left:0; right:0; top:0;
  background-color: #F0F0E8;
  z-index:2;
}

#mainbody { 
  position: absolute;
  top: 150px;
}

Div Anchors Scrolling Too Far