#Uncategorized

How to offset anchor tag link using CSS and smooth scroll

by admin 0

If your website has a fixed header you may have noticed that anchor tag links don’t work perfectly – when a user uses anchor link the location of the anchor becomes hidden behind the fixed header, hiding the first part of the content.

 

 

Source code     
:target:before {
	content:"";
	display:block;
	height:130px; /* fixed header height*/
	margin:-130px 0 0; /* negative fixed header height */
}

 

now you you can make it scroll smoothly to the linked anchor, not just jump there.

Source code     
<script>
$('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') 
        || location.hostname == this.hostname) {
 
        var target = $(this.hash);
		console.log("target= " + target);
        target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
		console.log(target);
           if (target.length) {
             $('html,body').animate({
                 scrollTop: (target.offset().top - 130) /*offset due to floating header*/
            }, 1000);
            return false;
        }
    }
});
</script>

 

 

Reference: http://stackoverflow.com/questions/4086107/html-positionfixed-page-header-and-in-page-anchors