Scroll to anchor with offset from external page jQuery

When need to Developing a website it’s important that all anchor links are working. Also if those links Scholl to anchor to the exact Location with a offset value that would be really cool thing.

Recently i have worked in a site for my client, She need all the Anchor link Scroll to the exact Location with smooth scrolling effect.

href="http://example.com/other_page.html#section"

So all are working good but when i trying to Scroll to anchor from external page that was really a challenge for me. After some Research Found some useful Code.

<script>
jQuery(document).ready(function(){
// run on DOM ready
// grab target from URL hash (i.e. www.example.com/page-a.html#target-name)

var target = window.location.hash;

// only try to scroll to offset if target has been set in location hash

if ( target != '' ){
    var $target = jQuery(target); 
    jQuery('html, body').stop().animate({
    'scrollTop': $target.offset().top - 50}, // set offset value here i.e. 50
    900, 
    'swing',function () {
    window.location.hash = target - 40 ;
    });
}
});
</script>

Place the above code before </body> tag. You can Change the offset value and swing target value. Scroll to anchor with offset from external page can doen by jQuery. it’s Really an easily fix by adding the JQuery code with a Smooth Scrolling effect.

About The Author

2 thoughts on “Scroll to anchor with offset from external page jQuery”

    1. Sorry for late reply. Yes you can do that but you need to use a Page load plugin or a function. Also you need to assign a a id on the link it will scroll to the exact point.

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top
1 Shares
Tweet
Share
Pin
Share1