JQuery populate div with link content but also need to move (like anchor link) to area where div located

Question

I have unordered list of links. Using JQuery, when clicked, the link's contents (a div with image and text) are loaded into the section specified. This all works beautifully. But I'm wondering how to also get the onclick function to move the view to the div's location on the page similarly to how anchor tag works. Here is the site where you can see the div being populated, but not moving down to view it. https://www.thecompassconcerts.com/artists.php

My JQuery knowledge is not awesome (I'm being generous).

I followed Osama's suggestion to add event listener and I got almost correct results. Upon first click...contents are loaded but do not move. But on every successive click, it functions perfectly: Contents loaded and move to div (like an anchor link) works! BUT...not on Safari or Mobile Safari.

Here is my jQuery. I assume if first click is not working that I must add listener before the first click?? Can the event listeners be added on page load BEFORE the function to prevent default click, etc.?

<script>
        // BEGIN FUNCTION TO CAPTURE AND INSERT CONTENT
        $(document).ready(function () {

            // PREVENT DEFAULT LINK ACTION
            $('.bio').click(function (e) {
                e.preventDefault();

                // ADD LISTENER TO EACH ITEM BY CLASS
                var list = document.getElementsByClassName("bio");
                for (let i = 0; i < list.length; i++) {
                    list[i].onclick = moveToDiv;
                }

                // FUNCTION TO MOVE TO LOCATION
                function moveToDiv() {
                    document.location = "#performbio";
                }

                // STORE the page contents
                var link = $(this).attr("href");

                // load the contents into #performbio div
                $('#performbio').load(link);

            });
        });
    </script>

Here is the HTML with links in unordered list

<!-- CONTRIBUTING ARTISTS LIST AND BIOS -->
            <section id="artists">
                <h2>Contributing Artists</h2>
                <ul class="cols">
                    <li><a class="bio" href="performers/first-last.html">First Last</a></li>

                    <li><a class="bio" href="performers/first-last.html">First Last</a></li>

                    <li><a class="bio" href="performers/first-last.html">First Last</a></li>
</ul>
</section>

Here is HTML of Section where code is being inserted by function

<!-- Performer Bios Dynamically updated -->
            <section id="performbio">

            </section>

Here is div contents that are being inserted

<div class="artistbio">
    <p class="artistname">First Last</p>
    <img class="artistimg" src="performers/img/name.jpg">
    <p>lots of text here</p>
</div>

Answer 1

If I understand it right, you want to scroll to the section where the details appear on clicking any item in the list but through js and not HTML. In that case, you would add an onclick listener on to the list elements like so:

listElement.onclick = moveToDiv;

The function:

function moveToDiv() {
    document.location = "#performbio";
}

A simple way to add a listener to all of the elements:

var list = document.getElementsByClassName("bio");
for (let i = 0; i < list.length; i++) {
    list[i].onclick = moveToDiv;
}

For the edited post, you need to move the function definition out of the document.ready function. you would change the script to:

    // FUNCTION TO MOVE TO LOCATION
    function moveToDiv() {
        document.location = "#performbio";
    }

    $(document).ready(function () {
        // PREVENT DEFAULT LINK ACTION
        $('.bio').click(function (e) {
            e.preventDefault();

            // ADD LISTENER TO EACH ITEM BY CLASS
            var list = document.getElementsByClassName("bio");
            for (let i = 0; i < list.length; i++) {
                list[i].onclick = moveToDiv;
            }

            // STORE the page contents
            var link = $(this).attr("href");

            // load the contents into #performbio div
            $('#performbio').load(link);

            });
        });

Another Solution: Using scrollIntoView

First, get all the elements into a variable using querySelectorAll

    var elements = document.querySelectorAll(".bio");

Then create a function, for the scrolling part:

    function scroll(element) {
        element.scrollIntoView();
    }

Then just add the onclick listener:

    for (let i = 0; i < elements.length; i++) {
    elements[i].addEventListener('click', function() { 
            scroll(elements[i]); 
        }); 
    }

Answer 2

I found it very frustrating to try to accomplish these two tasks so instead of a jQuery solution I opted for a CSS solution.

I populated my DIV with all the php includes, gave them unique id's for the anchors to work and then used CSS to hide them by default until clicked and it works like a charm....shows only what I need to show and goes there like an anchor is supposed to.

I must thank Ghost for all of your help and efforts to try and solve this via jQuery. You were very kind and generous.

Here is the code I used: My collection of links.

<li><a class="bio" href="#artist-name1">Name 1</a></li>
<li><a class="bio" href="#artist-name2">Name 2</a></li>

which anchors to these divs

<div class="bio-container" id="artist-name1">
<?php include('performers/name-lastname.html'); ?>
</div>
<div class="bio-container" id="artist-name2">
<?php include('performers/name-lastname.html'); ?>
</div>

Then I use this CSS to hide those divs until the anchors are clicked. I'm using [id*="artist-"] to target only links with such text...very easy. Not ideal for a massive list...but mine is not so large so it will do for this situation.

[id*="artist-"] {display: none;}

[id*="artist-"]:target {display: block;}