Question

I am trying to use the following jQuery snippet to create a smooth scroll to # links on my WordPress site:

$(window).bind("load", function() {
   var urlHash = window.location.href.split("#")[1];
    $('html,body').animate({scrollTop:$('a[href="#'+urlHash+'"]').offset().top}, 4000);        
});

This works fine when links are structured like this:

mysite.com/page.htm#scroll1

However, as my site is WordPress, my links are constructed like this:

mysite.com/?page_id=6#scroll1

or

mysite.com/section/#scroll1

This seems to throw the script.

Is there anything I can add to the snippet to enable it to understand this kind of link structure?

Sorry if that’s a dumb question, I am a beginner.

Answer 1

Try this:

$(document).ready(function () {
    function Move2UrlAnchor(speed) {
        $('html,body').scrollTop(0);
        if (window.location.hash) {
            var anchor = window.location.hash;
            var id = anchor.replace('#','');
            $("a[href*='"+anchor+"']").attr('id', id);
            var ScroolPos = $(anchor).offset().top;
            $('html,body').animate({ scrollTop: ScroolPos },speed);
        };
    };
Move2UrlAnchor(10000);
});