导航菜单错误"未捕获的TypeError:无法读取属性' top'未定义"

时间:2017-06-28 12:35:55

标签: javascript html

每当我点击导航菜单上的菜单项时,都会收到以下错误消息 "未捕获的TypeError:无法读取属性' top'未定义"。我检查了浏览器控制台并发现此功能导致错误



$('html, body').animate({
    scrollTop: $($(this).attr('href')).offset().top
}, 700);

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

HTML CODE HERE

&#13;
&#13;
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <meta name="description" content="">
  <!-- <meta name="author" content=" studio"> -->
  <meta name="viewport" content="width=device-width">
  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" media="(min-width: 768px)" href="css/min768.css">
  <link href='http://fonts.googleapis.com/css?family=Roboto+Slab:400,700,300|Roboto:400,500,300italic,300|Damion' rel='stylesheet' type='text/css'>
  <script src="js/modernizr-2.6.2.js"></script>


  <!-- <link rel="icon" type="image/png" href="favicon.png" /> -->
  

  <!--Internet Explorer 8 or older doesn't support media query. This script helps ie7 and ie8 to recognize media queries-->
  <!--[if lt IE 9]>
    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
  <![endif]-->

    
</head>
<body>


    <!-- BEGIN HEADER -->
    <header>
      <div class="container">
        
        <!-- Begin of  .logo --> 
       <a href="index.php" id="logo"></a>
        <!-- End of .logo  -->
        
        <!-- Begin of .sign --> 
        <ul class="signin">
          <li><span>Already a member?</span><a href="" class='sign'>Signin</a></li>
        </ul>
        <!-- End of .sign  -->

        <div class="clearfix"></div>
        
        <!-- Begin of navigation --> 
        <nav>
          <span>Select page you want<b></b></span>
          <ul>
              <li><a href="index.php">Home</a></li>
            <li class='hide-on-wide'><a href="#search">Search</a></li>
            <!--<li><a href="#results">Results</a></li>-->
            <li><a href="members.php">Members</a></li>
            <li><a href="profiles.html">Testimonials</a></li>
            <li><a href="#about">About us</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </nav>
&#13;
&#13;
&#13;

我已经在此网站上查看了其他threads以获取此问题的解决方案,但我所看到的并没有解决问题。任何帮助表示赞赏

2 个答案:

答案 0 :(得分:1)

不确定您在此尝试实现的目标。但是现在您正在请求在您的身体和html中寻找href属性的元素的偏移量。

我猜你想要在锚上获得偏移量。 在这种情况下,给你的锚一个类,并使用这样的东西:

    scrollTop: $('.anchor-class').offset().top

答案 1 :(得分:0)

我尝试在本地运行,或者你的目标元素有一个错误的id或id不存在

我做了

std::unique_ptr

$('a').click(function(e){
    e.preventDefault()
    $('html, body').animate({
    scrollTop: $($(this).attr('href')).offset().top
    }, 700);
})

和div

<a href="#asd">ads</a>