javascript - 未捕获的类型错误 : Cannot read property 'top' of undefined in an attempt to autoscroll to gallery

Question

我是新来的，我已尝试阅读尽可能多的标题相似的主题，并尝试了解决方案，但没有一个对我有用...

我有一个单页导航，想法是网站应该滚动到相关部分(通过主题标签)，子菜单似乎抛出错误...

我正在使用 Bootstrap 框架

HTML

<ul class="nav navmenu-nav">
<li><a href="#home">Home</a></li>
<li><a href="#film-making">Filmmaking</a></li>
<!-- begin dropdown -->
<li class="dropdown">
    <a id="showcase_menulink" class="dropdown-toggle" data-toggle="dropdown" href="#showcase">Photography</a>
    <!-- submenu -->
    <ul id="showcase_menu" class="dropdown-menu navmenu-nav">
        <li><a href="#brides">Brides</a></li>
        <li><a href="#couples">Happy Couples</a></li>
        <li><a href="#hands">Hands</a></li>
        <li><a href="#venues">Venues</a></li>
        <li><a href="#forgotten">Forgotten Things</a></li>
    </ul>
    <!-- /submenu -->
    </li>
<li><a href="#testimonials">Testimonials</a></li>
<li><a href="#packages">Packages</a></li>
<li><a href="#contact">Contact</a></li>
</ul>

正如您从代码中看到的那样，它是标准的 Bootstrap 布局，包括下拉菜单。我用来为页面设置动画的脚本如下

JS

$(document).ready(function(){
     $('a[href^="#"]').on('click',function (e) {
         e.preventDefault();
         var target = this.hash,
         $target = $(target);
         $('html, body').stop().animate({
             'scrollTop': $target.offset().top ***line9***
         }, 900, 'swing', function () {
         window.location.hash = target;
         });
     });
});

我一直收到一个错误

Uncaught TypeError: Cannot read property 'top' of undefined... line 9 

也就是上面的星号……”

我尝试了其他类似问题的大量修复，但没有找到解决方案。

Answer 1

确保您的页面包含 dom 元素，其 id 等于您的 href 位置的哈希值。例如，如果您有如下链接:

<li><a href="#brides">Brides</a></li>

你需要一个相应的元素(不一定是 div)，如下所示:

<div id="brides"></div>

这里有一个 fiddle 示例，其中包含新娘、情侣和手的 div。

JSFiddle