アンカー遷移を伴うスクロールスティック

スクロールスパイとnavbarから特定のアンカー位置への移行に問題があります。これまでポートフォリオタブをクリックすると、スムーズなアニメーションで動くように指定したにもかかわらず、カットオフして本当に速く下がります。同様に、ページは次のページに途中で切り取られます。私がスクロールすると、スクロールスパイはフォローされません。なぜこのようなことが起こっているのでしょうか？私はチェックして、私のディレクトリに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>

出典

2016-07-06 Garison Andrers

それは404 REPONSEを持っていたので、あなたのソリューションは、コードスニペットに非常によく動作しますが、私はあなたのポートフォリオセクションを追加しました。マベ、それもあなたの問題を解決しますか？

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

出典

2016-07-06 12:21:45 Relisora

いや、それはまだscrollspyはまだ立ち往生していると、アンカーはまだ周りにジャンプしているいくつかの理由で私のために動作しません。 –

あなたはどのブラウザを使用していますか？ Chrome上で動作しています012 – Relisora

Google Chromeバージョン51.0.2704.106 m（64ビット）もエッジでテストされています。 –

アンカー遷移を伴うスクロールスティック

答えて

関連する問題