javascript - 平滑滚动 jQuery 不起作用 - 无法读取未定义的属性 'top'

Question

我花了几个小时试图弄清楚为什么它不起作用。基本上我只希望我的页面滚动顺畅。

这是我的代码:

$(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

您需要从 <a> 中获取 href标签，而不是 <li>标签。

您可以使用 find() 实现此目的功能

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

我假设这将向下滚动到另一个 html 元素。但我不知道，可能是错的，抱歉

希望这有帮助:)

$(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>