Directing a button to another page and activating filter html/JS

I'm trying to direct a button/text from my home page to my portfolio page and where I have a filter set. the page URL isn't changing when activating a filter so directing the link with ID is not working. I'm not an expert with JS i tried to make getfunction when going to the page but didn't work out can someone help me please?

here are parts of the code:

home page

<div  class="site-btn">

                 <a href="portfolio.html" >< span>Portfolio</span></a></div> 

what i tried > as calling by ID but didn't work out cause the link won't even change

<div  class="site-btn" >
                 <a href="portfolio.html/#graphic" >< span>Portfolio< /span>< /a>< /div>

portfolio page:

origianl

<section class="portfilio-page">

        < div class="portfolios-area">
            < div class="grid-sizer"></div>
            < div class="grid-item portfolio-item __big __wide">
                < div class="portfolio-intro text-white" >
                    < h2>Portfolio< /h2>
                    <ul class="portfolio-filter controls">
                        < li class="control" data-filter="all">All</li>
                        <li class="control" id="graphic" data-filter=".graphic">Graphic Design</li>
                        <li class="control" data-filter=".modeling">3D Digital Art</li>
                        <li class="control" data-filter=".ui">UI/UX</li>
                        <li class="control" data-filter=".motion">Motion Graphic</li>
                        <li class="control" data-filter=".animation">2D/3D animation</li>
                        <li class="control" data-filter=".frontend">Front End Design/Development</li>
                    </ul>
                </div>                                                                
            </div>

<!-- Item -->
            <a href="digi_design.html" class="grid-item mix portfolio-item set-bg graphic" data-setbg="img/portfolio/digitain_brandbook.jpg"></a>

when activating a filter

<ul class="portfolio-filter controls">
                        <li class="control" data-filter="all">All</li>
                        <li class="control mixitup-control-active" id="graphic" data-filter=".graphic">Graphic Design</li>
                        <li class="control" data-filter=".modeling">3D Digital Art</li>
                        <li class="control" data-filter=".ui">UI/UX</li>
                        <li class="control" data-filter=".motion">Motion Graphic</li>
                        <li class="control" data-filter=".animation">2D/3D animation</li>
                        <li class="control" data-filter=".frontend">Front End Design/Development</li>
                    </ul>

JS trying to activate filter

<script>
    $(document).ready(function() {
        var graphic = window.location.graphic;
        if (graphic) {
             $('a[href="'+grpahic+'"]').click();
        }
   });
</script>