JavaScript的「平滑滾動」不會滾動

我正在開發使用Twitter的引導3的ASP.NET MVC項目中的單頁網站。

問題：

即時通訊目前試圖實現「平滑滾動」應該滾動到相關的分度，從導航欄點擊下拉。在從導航欄下拉菜單中點擊某個區段時，它會跳轉到div而不是滾動。

代碼：

這下面是我的「_Layout.cshtml」標記與提供導航欄和頁腳。 JavaScript的滾動顯示的腳本標記之間：

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>@ViewBag.Title - My ASP.NET Application</title> 
@Styles.Render("~/Content/css") 
@Scripts.Render("~/bundles/modernizr") 
    <script> 
     $('#nav .navbar-nav li>a').click(function() { 
      var link = $(this).attr('href'); 
      var offSet = 30; 
      var targetOffset = $(link).offset().top - offSet; 
      $('html,body').animate({ scrollTop: targetOffset }, 7000); 
     }); 
</script> 
</head> 
<body> 
<div class="navbar navbar-fixed-top"> 

    <nav class="navbar navbar-default" role="navigation" id="nav"> 
     <div class="container"> 
      <!-- Brand and toggle get grouped for better mobile display --> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
        <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="images/logo.png" alt="yourLogo"></a> 
      </div> 

      <!-- Collect the nav links, forms, and other content for toggling --> 
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
       <ul class="nav navbar-nav"> 
        <li class="active"><a href="#">Link</a></li> 
        <li class="dropdown"> 
         <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a> 
         <ul class="dropdown-menu" role="menu"> 
          <li><a href="#myCarousel">Projects</a></li> 
          <li><a href="#Welcome">Welcome</a></li> 
          <li><a href="#features">Thing</a></li> 
          <li><a href="#About">About Me</a></li> 
          <li><a href="#Location">Location</a></li> 
          <li><a href="#Contact">Contact Me</a></li> 
         </ul> 
        </li> 
       </ul> 
      </div><!-- /.navbar-collapse --> 
     </div><!-- /.container-fluid --> 
    </nav> 
</div> 

<div class="container body-content"> 
    @RenderBody() 
</div> 

<footer> 
    <!-- This HTML is outside the other container above i.e its separate. You need a container as this allows you to use bootstrap classes --> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-sm-2"> 
       <h6>Copyright &copy; 2014</h6> 
      </div> 

      <div class="col-sm-4"> 
       <h6>About Us</h6> 
       <p>Chia dreamcatcher artisan vinyl Intelligentsia Banksy. Art party whatever cred wolf hella distillery Portland wayfarers Kickstarter, kale chips pug artisan +1 crucifix.</p> 
      </div> 

      <div class="col-sm-2"> 
       <h6>Navigation</h6> 
       <ul class="unstyled"> 
        <li><a href="#">Home</a></li> 
        <li><a href="#">Services</a></li> 
        <li><a href="#">Links</a></li> 
        <li><a href="#">Contact</a></li> 
       </ul> 
      </div> 

      <div class="col-sm-2"> 
       <h6>Follow Us</h6> 
       <ul class="unstyled"> 
        <li><a href="#">Twitter</a></li> 
        <li><a href="#">Facebook</a></li> 
        <li><a href="#">Google Plus</a></li> 
       </ul> 
      </div><!-- end col-sm-2 --> 

      <div class="col-sm-2"> 
       <h6>Coded with<span class="glyphicon glyphicon-heart"> by Me</span></h6> 


      </div> 
     </div> 
    </div> 
</footer> 
</body> 


@Scripts.Render("~/bundles/jquery") 
@Scripts.Render("~/bundles/bootstrap") 
@RenderSection("scripts", required: false)

截圖：

下面的截圖顯示，導航欄選項，當單擊頁轉到正確的DIV，但它不會滾動。任何幫助解決這個問題都會很好。

enter image description here

來源

2014-10-16 user1352057

您需要阻止錨點的默認行爲，否則瀏覽器將在您的事件處理程序運行之前獲取'＃whatever'哈希值並跳轉頁面。 – Mathletics 2014-10-16 20:26:31

-1

嘗試增加「PX」到scrollTop的：

$('#nav .navbar-nav li>a').click(function() { 
     var link = $(this).attr('href'); 
     var offSet = 30; 
     var targetOffset = $(link).offset().top - offSet; 
     $('html,body').animate({ scrollTop: targetOffset + "px" }, 7000); 
    });

或本：

$('#nav .navbar-nav li>a').click(function() { 
     var link = $(this).attr('href'); 
     var offSet = 30; 
     var targetOffset = $(link).offset().top - offSet; 
     $('html,body').animate({ scrollTop: targetOffset }, 'slow'); 
    });

我認爲你需要執行它的頁面加載後：

$(document).ready(function() { 
    $('#nav .navbar-nav li>a').click(function() { 
     var link = $(this).attr('href'); 
     var offSet = 30; 
     var targetOffset = $(link).offset().top - offSet; 
     $('html,body').animate({ scrollTop: targetOffset }, 'slow'); 
    }); 
});

來源

2014-10-16 20:22:44

-1

<script> 
$(function() { 
    $('a[href*=#]:not([href=#])').click(function() { 
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { 

     var target = $(this.hash); 
     target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); 
     if (target.length) { 
     $('html,body').animate({ 
      scrollTop: target.offset().top 
     }, 1000); 
     return false; 
     } 
    } 
    }); 
}); 
</script>

來自[http://css-tricks.com/snippets/jquery/smooth-scrolling/]

來源

2014-10-16 20:24:26

你明白這段代碼的作用嗎？ – Mathletics 2014-10-16 20:25:06

是的，當鏈接被點擊而不是跳躍時，它使用動畫和1000的速度。 – 2014-10-16 20:30:34

但是這部分和OP所發佈的沒什麼不同（速度除外，這不是問題）。 – Mathletics 2014-10-16 20:32:07

更多的研究和使用這個偉大的例子後：http://alijafarian.com/responsive-page-scrolling-with-jquery-and-bootstrap/我設法生產出低於該作品完美的解決方案。

<script> 

    $(document).ready(function() { 
     $('#nav .navbar-nav li>a').on('click', function(event){ 
      event.preventDefault(); 
      var sectionID = $(this).attr("href"); 
      scrollToID(sectionID, 750); 
     }); 

     function scrollToID(id, speed) 
     { 
      var offSet = 70; 
      var targetOffset = $(id).offset().top - offSet; 
      $('html,body').animate({scrollTop:targetOffset}, speed); 
     } 
     }); 
</script>

來源

2014-10-16 22:59:44 user1352057

JavaScript的「平滑滾動」不會滾動

回答

相關問題