2014-11-22 34 views
0

我遇到了scrollTop的問題,它看起來像點擊頂部的元素時,它首先到底部然後向上。如果我已經處於最底層,那麼它可以正常工作。我想使它所以從當前位置ScrollTop問題 - 先移動到底部

<!DOCTYPE html> 
 
<html> 
 

 

 
<head> 
 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
\t <script src="http://code.jquery.com/jquery-latest.min.js"type="text/javascript"></script> 
 
\t <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> 
 
\t <!-- Optional theme --> 
 
\t <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css"> 
 
\t <!-- Latest compiled and minified JavaScript --> 
 
\t <script src="js/bootstrap.min.js"></script> 
 
\t <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon"> 
 
    <link rel="icon" href="images/favicon.ico" type="image/x-icon"> 
 
\t <link rel="stylesheet" type="text/css" href="css/main.css"> 
 
\t 
 

 
</head> 
 

 
<body> 
 
    <div class="container-full"> 
 
     
 
     <div class="navbar" style="margin-bottom:0px;"> 
 
     <div class="navbar-header"> 
 
     </div> 
 
     <ul class="nav navbar-nav pull-right"> 
 
      <li class="active"><a href="#">Home</a></li> 
 
      <li><a href="#">Link</a></li> 
 
      <li><a href="#">Link</a></li> 
 
      <li class="divider-vertical"></li> 
 
      <li><a href="#">More</a></li> 
 
      <li><a href="#">Options</a></li> 
 
     </ul> 
 
     </div> 
 

 
     <div class="jumbotron text-center"> 
 
     <div class="box-label-container"> 
 
     \t 
 
     </div> 
 
    </div> 
 

 
    \t <div class="container-full"> \t 
 
     <div class="row text-center"> 
 
     <div class="col-lg-3 col-lg-offset-1"> 
 
      <h4><a href="#project-section">projects</a></h4> 
 
      <img src="images/project-diagram.png" alt="project diagram" /> 
 
     </div> 
 

 
     <div class="col-lg-3"> 
 
      <h4><a href="#work-section">work</a></h4> 
 
      <img src="images/working-wheels.png" alt="work=image" /> 
 
     </div> 
 

 
     <div class="col-lg-3"> 
 
      <h4><a href="">me</a></h4> 
 
      <img src="images/computer-guy-sketch.png" alt="work=image" /> 
 
     </div> 
 
     
 
     </div> 
 
    
 
    <a name="Projects" id="project-section"> 
 
\t <div class="work" style="height:500px; background-color:#f8f8f8"><strong>Projects</strong></div></a> 
 

 
<a name="Projects" id="work-section"> 
 
\t <div class="work" style="height:500px; background-color:#f8f8f8"><strong>work</strong></div></a> 
 

 
    <footer> 
 
    \t <a href="#top" id="top"><img src="images/up-arrow.png" alt="up-arrow" /> </a> 
 
     <div class="social-icons"> 
 
    \t <a href=""><img src="images/github-icon.png" alt="github-icon" /></a> 
 
    \t <a href-""><img src="images/linkedin-icon.png" alt="linkedin-icon" /></a> 
 
    \t <a href=""><img src="images/twitter-icon.png" alt="twitter-icon" /></a> 
 
     </div> 
 
    </footer> 
 
</div> <!-- /container full --> 
 
</body> 
 
</html> 
 
<script> 
 
$(document).ready(function(){ 
 
\t $('a').click(function(){ 
 
\t  $('html, body').animate({ 
 
\t   scrollTop: $($(this).attr('href')) 
 
\t   .offset().top}, 700); 
 
\t  return false; 
 
\t }); 
 

 
\t $("#top").click(function(e) { 
 
    $("html, body").animate({ scrollTop: 0 }, 700); 
 
    return false; }); 
 

 
}); 
 

 

 
</script>

向上移動
+0

嗯,該片段似乎工作罰款我使用Chrome – Rhumborl 2014-11-22 16:41:44

+0

它不會先到底部?我使用的是鉻合金 – Phreak 2014-11-22 16:43:20

+0

好吧我現在粘貼了我的整個文件,它不起作用 – Phreak 2014-11-22 16:47:12

回答

2

的問題是其他一般a單擊事件處理程序首先運行和top之前滾動到其href目標 - 特別的。這意味着當你點擊top時,它會向下滾動到自身,然後向上滾動。

處理此問題的最佳方法是在頁面頂部設置top元素,例如<div class="container-full" id="top">,這樣您就不需要兩個不同的事件處理程序,它將在未啓用JavaScript的情況下工作。

如果你想保留它原來的樣子,你只需要使用$('a[id!=top]').click(function(){...}排除從一般a事件處理<a id="top">

<!DOCTYPE html> 
 
<html> 
 

 

 
<head> 
 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
\t <script src="http://code.jquery.com/jquery-latest.min.js"type="text/javascript"></script> 
 
\t <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> 
 
\t <!-- Optional theme --> 
 
\t <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css"> 
 
\t <!-- Latest compiled and minified JavaScript --> 
 
\t <script src="js/bootstrap.min.js"></script> 
 
\t <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon"> 
 
    <link rel="icon" href="images/favicon.ico" type="image/x-icon"> 
 
\t <link rel="stylesheet" type="text/css" href="css/main.css"> 
 
\t 
 

 
</head> 
 

 
<body> 
 
    <div class="container-full"> 
 
     
 
     <div class="navbar" style="margin-bottom:0px;"> 
 
     <div class="navbar-header"> 
 
     </div> 
 
     <ul class="nav navbar-nav pull-right"> 
 
      <li class="active"><a href="#">Home</a></li> 
 
      <li><a href="#">Link</a></li> 
 
      <li><a href="#">Link</a></li> 
 
      <li class="divider-vertical"></li> 
 
      <li><a href="#">More</a></li> 
 
      <li><a href="#">Options</a></li> 
 
     </ul> 
 
     </div> 
 

 
     <div class="jumbotron text-center"> 
 
     <div class="box-label-container"> 
 
     \t <ul> 
 
     \t \t <li>html</li> 
 
     \t \t <li>css</li> 
 
     \t \t <li>JS</li> 
 
     \t \t <li>php</li> 
 
     \t \t <li>java</li> 
 
     \t </ul> 
 
     </div> 
 
    </div> 
 

 
    \t <div class="container-full"> \t 
 
     <div class="row text-center"> 
 
     <div class="col-lg-3 col-lg-offset-1"> 
 
      <h4><a href="#project-section">projects</a></h4> 
 
      <img src="images/project-diagram.png" alt="project diagram" /> 
 
     </div> 
 

 
     <div class="col-lg-3"> 
 
      <h4><a href="#work-section">work</a></h4> 
 
      <img src="images/working-wheels.png" alt="work=image" /> 
 
     </div> 
 

 
     <div class="col-lg-3"> 
 
      <h4><a href="">me</a></h4> 
 
      <img src="images/computer-guy-sketch.png" alt="work=image" /> 
 
     </div> 
 
     
 
     </div> 
 
    
 
    <a name="Projects" id="project-section"> 
 
\t <div class="work" style="height:500px; background-color:#f8f8f8"><strong>Projects</strong></div></a> 
 

 
<a name="Projects" id="work-section"> 
 
\t <div class="work" style="height:500px; background-color:#f8f8f8"><strong>work</strong></div></a> 
 

 
    <footer> 
 
    \t <a href="#top" id="top"><img src="images/up-arrow.png" alt="up-arrow" /> </a> 
 
     <div class="social-icons"> 
 
    \t <a href=""><img src="images/github-icon.png" alt="github-icon" /></a> 
 
    \t <a href-""><img src="images/linkedin-icon.png" alt="linkedin-icon" /></a> 
 
    \t <a href=""><img src="images/twitter-icon.png" alt="twitter-icon" /></a> 
 
     </div> 
 
    </footer> 
 
</div> <!-- /container full --> 
 
</body> 
 
</html> 
 
<script> 
 
$(document).ready(function(){ 
 
\t $('a[id!=top]').click(function(){ 
 
\t  $('html, body').animate({ 
 
\t   scrollTop: $($(this).attr('href')) 
 
\t   .offset().top}, 700); 
 
\t  return false; 
 
\t }); 
 

 
\t $("#top").click(function(e) { 
 
    $("html, body").animate({ scrollTop: 0 }, 700); 
 
    return false; }); 
 

 
}); 
 

 

 
</script>

+0

這使得完美的邏輯意義 - 我去做一個事件處理程序,並添加ID頂部到它。謝謝你的時間幫助我 - 非常感謝 – Phreak 2014-11-22 17:39:30