Delay Anchor Scrolling Animation after Pageload

Design help Custom code
1

hey!
i want to delay the default anchor scrolling animation. i already found a solution for the case when link and section are on the same page. please have a look here. for a different project i am trying to work on another solution. now the section that should be scrolled to is not on the same page as the link. so the page should load first. and then scroll down. also i need to add a delay before the pageload (after link is clicked) and after the pageload because i need to trigger some transition interactions first.

i already wrote a custom piece of code to delay pageloads for every link with the class .pagetransition. like this i can trigger an interaction before the user will be guided to the new page. i will attach the code to the bottom of this post.

now i need a link to follow the same timeout function but also scroll to a section anchor on the next page. before the scrolling animation i want the site to timeout again so that i can fire another interaction first. so the idea is: click → wait 400ms → pagetransition → wait 400ms → scroll to section anchor.

maybe you can help me out again. i would really appriciate this.

thanks in advance!
jaro
_

<script>
$(document).ready(function() {
    $(".pagetransition").click(function() {
        
        var href = $(this).attr('href');

        // Delay settings
        setTimeout(function() {window.location = href}, 400);
        return false;
    });
});
</script>
1 Like