I have this code and it works great:

    $(document).ready(function () {

        if (window.location.href.indexOf("emotion--1") > -1) {
            $('#scroll-down').addClass('scroll-down');       
            $('#scroll-down').deleteClass('invisible');
        }  

        if (window.location.href.indexOf("emotion--2") > -1) {
            $('#shirt').addClass('draw-shirt');       
            $('#scroll-down-2').addClass('scroll-down');   
            $('#shirt, #scroll-down-2').deleteClass('invisible');
        }  
        
        if (window.location.href.indexOf("emotion--3") > -1) {
            $('#dress').addClass('draw-dress');       
            $('#scroll-down-3').addClass('scroll-down');               
            $('#garbage, #scroll-down-3').deleteClass('invisible');
        } 
        });
        
  
    window.addEventListener('hashchange', function() {
   
        if (location.hash === '#emotion--1') {
            $('#scroll-down').addClass('scroll-down');       
            $('#scroll-down').deleteClass('invisible');
        }       

        if (location.hash === '#emotion--2') {
            $('#shirt').addClass('draw-shirt');       
            $('#scroll-down-2').addClass('scroll-down');   
            $('#shirt, #scroll-down-2').deleteClass('invisible');
        }  
        
        if (location.hash === '#emotion--3') {
            $('#dress').addClass('draw-dress');       
            $('#scroll-down-3').addClass('scroll-down');               
            $('#dress, #scroll-down-3').deleteClass('invisible');
        }         
        });

As you can see, both functions are almost similar. What can I do to tidy it up and to shorten it? I already have this:

    if ( (window.location.href.indexOf("emotion--1") > -1) || (location.hash === '#emotion--1') ) {
            $('#scroll-down').addClass('scroll-down');       
            $('#scroll-down').deleteClass('invisible');
    }  

    if ( (window.location.href.indexOf("emotion--2") > -1) || (location.hash === '#emotion--2') ) {
        $('#shirt').addClass('draw-shirt');       
        $('#scroll-down-2').addClass('scroll-down');   
        $('#shirt, #scroll-down-2').deleteClass('invisible');
    }  
    
    if ( (window.location.href.indexOf("emotion--3") > -1) || (location.hash === '#emotion--3') ) {
        $('#dress').addClass('draw-dress');       
        $('#scroll-down-3').addClass('scroll-down');               
        $('#garbage, #scroll-down-3').deleteClass('invisible');
    }       

But where do I have to put the Eventlistener and the document.ready code? I'm still new to JavaScript.