For the site I'm working on I want people to be able to click on a topic, go to that page, then have a button at the bottom of that page which will take them back to where they were browsing before.

The below script did work for that:

    $(document).ready(function() {
    $('html, body').hide();

    if (window.location.hash) {
        setTimeout(function() {
            $('html, body').scrollTop(0).hide();
            $('html, body').animate({
                scrollTop: $(window.location.hash).offset().top - 100
                    },  100)
        }, 0);
    }
    else {
        $('html, body').show();
    }
});

However, it's not the nicest UX. When it loads in it either jumps uncomfortably fast to the place I'm trying to get them to or you have to watch it scroll slowly which isn't fun either.

I do have to make it scroll because otherwise it breaks other animations on the page, so I thought I would just hide the entire thing while it's scrolling, then show it or fade it in when it's done.

I wrote the below to do that, and it does hide it, it does show it, and the console log triggers... But it no longer scrolls down to where I want it go.

Any help?

$(document).ready(function() {
    $('html, body').hide();

    if (window.location.hash) {
        setTimeout(function() {
            $('html, body').scrollTop(0).hide();
            $('html, body').animate({
                scrollTop: $(window.location.hash).offset().top - 100
                    },  100, function() {
                $('html, body').show();
            console.log("JHjlkjl");
            })
        }, 0);
    }
    else {
        $('html, body').show();
    }
});