Scrollspy与ancor过渡

时间：2016-07-06 12:09:39

标签： jquery html css

我的滚动间谍有问题，并从导航栏过渡到特定的锚位置。当我点击“投资组合”选项卡时，即使我指定它以平滑的动画移动，它也会切断并快速下降。以及页面被切断到下一个页面的一半。滚动时，滚动间谍不会跟随。任何想法为什么会发生这种情况？我已经检查过，我的目录中有Jquery。

$('a').click(function(){
    $('html, body').animate({
        scrollTop: $( $(this).attr('href') ).offset().top
    }, 500);
    return false;
});
body {
    position: relative;
}
/*footer*/
.navbar-brand {
  padding: 0px;
}
.navbar-brand>img {
  height: 100%;
  padding: 15px;
  width: auto;
}


.huskynav .navbar-brand {
  height: 80px;
}

.huskynav .nav >li >a {
  padding-top: 30px;
  padding-bottom: 30px;
}
.huskynav .navbar-toggle {
  padding: 10px;
  margin: 25px 15px 25px 0;
}
/*deviders*/
.home{
    height: 100%;
    padding-top: 150px;
    text-align: center;
    background: #423840;
}

.about {
    height: 100%;
    padding-top: 150px;
    text-align: center;
    background: #8dd8f8;
}

.service {
    height: 100%;
    padding-top: 150px;
    text-align: center;
    background: #9D714F;
}

.info{
    height: 100%;
    padding-top: 150px;
    text-align: center;
    background: #eee;
}

.contact {
    height: 100%;
    padding-top: 150px;
    text-align: center;
    background: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<head>
   


</head>
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<div class="huskynav">
  <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navigate">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#"><img src="img/teamhuskylogo.png" alt="Team Husky Logo">
        </a>
      </div>
      <div id="navigate" class="navbar-collapse collapse">
        <ul class="nav navbar-nav navbar-right">
          <li class="active"><a href="#home">Home</a></li>
          <li><a href="#myAnchor" rel="" id="anchor1" class="anchorLink">Portfolio</a></li>
          <li><a href="#service">Service</a></li>
          <li><a href="#info">Info</a></li>
          <li><a href="#contact">Contact us</a></li>

        </ul>
      </div>
      <!--/.nav-collapse -->

    </div>
    <!--/.container-fluid -->
  </nav>
</div>



<section id="home" class="home">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
              <h1>Home</h1>

            </div>
        </div>
    </div>
</section>

<section id="about" class="about">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <a name="myAnchor" id="myAnchor"><strong>Portfolio</strong></a>
            </div>
        </div>
    </div>
</section>

<section id="service" class="service">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <h1>Service</h1>
            </div>
        </div>
    </div>
</section>

<!-- Contact Section -->
<section id="info" class="info">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <h1>Info</h1>
            </div>
        </div>
    </div>
</section>


<section id="contact" class="contact">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <h1>Contact us</h1>
            </div>
        </div>
    </div>
</section>
</body>

1 个答案:

答案 0 :(得分：2)

您的解决方案在代码段上工作得很好，我添加了投资组合部分，因为它有404响应。 Mabe它也能解决你的问题吗？

$('a').click(function(){
    $('html, body').animate({
        scrollTop: $( $(this).attr('href') ).offset().top
    }, 500);
    return false;
});
body {
    position: relative;
}
/*footer*/
.navbar-brand {
  padding: 0px;
}
.navbar-brand>img {
  height: 100%;
  padding: 15px;
  width: auto;
}


.huskynav .navbar-brand {
  height: 80px;
}

.huskynav .nav >li >a {
  padding-top: 30px;
  padding-bottom: 30px;
}
.huskynav .navbar-toggle {
  padding: 10px;
  margin: 25px 15px 25px 0;
}
/*deviders*/
.home{
    height: 100%;
    padding-top: 150px;
    text-align: center;
    background: #423840;
}

.about {
    height: 100%;
    padding-top: 150px;
    text-align: center;
    background: #8dd8f8;
}

.service {
    height: 100%;
    padding-top: 150px;
    text-align: center;
    background: #9D714F;
}

.info{
    height: 100%;
    padding-top: 150px;
    text-align: center;
    background: #eee;
}

.contact {
    height: 100%;
    padding-top: 150px;
    text-align: center;
    background: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<head>
   


</head>
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<div class="huskynav">
  <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navigate">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#"><img src="img/teamhuskylogo.png" alt="Team Husky Logo">
        </a>
      </div>
      <div id="navigate" class="navbar-collapse collapse">
        <ul class="nav navbar-nav navbar-right">
          <li class="active"><a href="#home">Home</a></li>
          <li><a href="#myAnchor" rel="" id="anchor1" class="anchorLink">Portfolio</a></li>
          <li><a href="#service">Service</a></li>
          <li><a href="#info">Info</a></li>
          <li><a href="#contact">Contact us</a></li>

        </ul>
      </div>
      <!--/.nav-collapse -->

    </div>
    <!--/.container-fluid -->
  </nav>
</div>



<section id="home" class="home">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
              <h1>Home</h1>

            </div>
        </div>
    </div>
</section>

<section id="myAnchor" class="home">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
              <h1>Portfolio</h1>

            </div>
        </div>
    </div>
</section>

<section id="about" class="about">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <a name="myAnchor" id="myAnchor"><strong>Portfolio</strong></a>
            </div>
        </div>
    </div>
</section>

<section id="service" class="service">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <h1>Service</h1>
            </div>
        </div>
    </div>
</section>

<!-- Contact Section -->
<section id="info" class="info">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <h1>Info</h1>
            </div>
        </div>
    </div>
</section>


<section id="contact" class="contact">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <h1>Contact us</h1>
            </div>
        </div>
    </div>
</section>
</body>

相关问题
最新问题