Redirect to another page and scroll to specific <div> are not working together

Question

Ok, this is my very first question posted to this forum so please be kind.. :)

I'm using ASP.NET MVC 5 and I am trying to do a two step process when an icon is clicked.

1. Select the correct page
2. Scroll down to a certain section on that page.

Here is what I got so far:

<a class="sidebar-brand d-flex align-items-center justify-content-start" >
   <div class="notification-bell" style="color:red">
   <i class="fas fa-fw fa-bell fa-2x" title="Number of Unread Comments" alert-count=@ViewBag.TotalUnreadComments.ToString() onclick='scrollToElement("CommentSection");'></i>
   </div>
</a>

And the Javascript

<script type='text/javascript'>
    function scrollToElement(id) {
        // Set correct page
        window.location.replace("/TodoListDashboard");

        //Get target
        var target = document.getElementById(id).offsetTop;

        //Scrolls to that target location
        window.scrollTo(0, target); 
    }
</script>

The funny thing is that either of these actions work by themselves but they won't work together.

Any ideas would be greatly appreciated!!!

Answer 1

Ok, I feel kind of foolish but I figured out an easy fix...

For this problem, I just created a javascript function and added both items together like this:

<script type='text/javascript'>
    function scrollToComments() {
        window.location.replace("/TodoListDashboard#CommentSection");
    }
</script>

Then I just changed my onclick call to:

<i class="fas fa-fw fa-bell fa-2x" title="Number of Unread Comments" alert-count=@ViewBag.TotalUnreadComments.ToString() onclick='scrollToComments();'></i>