Smooth scrolling jQuery doesn't work - Cannot read property 'top' of undefined

Question

I have spent hours trying to figure why it doesn't work. Basically I just want the scrolling on my page to be smooth.

Here is my code:

$(document).ready(function() {
    var scrollLink = $('.option-name');
    scrollLink.click(function(e){
        e.preventDefault();
        let linkRef = $(this).attr('href');
        let position = $(linkRef).offset().top;
    	$('html, body').animate({
    		scrollTop : position
    		}, 500)
    })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<header>
    <div class="my-name-header">
        <img src="people.png" class="astro-man-header">
        <h2>Itzik Shaoulian</h2>
    </div>
    <div class="nav-options">
        <nav>
            <ul class="list-options">
                <li class="option-name"><a href="#main-opening" class="nav-content">Home</a></li>
                <li class="option-name"><a href="#about-content" class="nav-content">About</a></li>
                <li class="option-name"><a href="#portfolio-content" class="nav-content">Portfolio</a></li>
                <li class="option-name"><a href="#skills-content" class="nav-content">Skills</a></li>
                <li class="option-name"><a href="#contact-content" class="nav-content">Contact</a></li>
                <li class="option-name"><a href="#" class="resume-header" class="nav-content">Resume</a></li>
            </ul>
        </nav>
    </div>
</header>

Answer 1

You need to get the href from the <a> tag, not the <li> tag.

You can achive this with the find() function

let linkRef = $(this).find('a').attr('href');

I assume this will scroll down to another html element. But i dont know, might be wrong, sorry

Hope this helps :)

$(document).ready(function() {
    var scrollLink = $('.option-name');
    scrollLink.click(function(e){
       e.preventDefault();
       let linkRef = $(this).find('a').attr('href');
       console.log(linkRef);//Log href
      
      //From this point, the full HTML is needed for operation
      // let position = $(linkRef).offset().top;
    	//$('html, body').animate({
    		//scrollTop : position
    		//}, 500)
    })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<header>
    <div class="my-name-header">
        <img src="people.png" class="astro-man-header">
        <h2>Itzik Shaoulian</h2>
    </div>
    <div class="nav-options">
        <nav>
            <ul class="list-options">
                <li class="option-name"><a href="#main-opening" class="nav-content">Home</a></li>
                <li class="option-name"><a href="#about-content" class="nav-content">About</a></li>
                <li class="option-name"><a href="#portfolio-content" class="nav-content">Portfolio</a></li>
                <li class="option-name"><a href="#skills-content" class="nav-content">Skills</a></li>
                <li class="option-name"><a href="#contact-content" class="nav-content">Contact</a></li>
                <li class="option-name"><a href="#" class="resume-header" class="nav-content">Resume</a></li>
            </ul>
        </nav>
    </div>
</header>