我遇到了使用scrollTop的问题，看起来当点击顶部元素时，它首先会到达底部然后向上。如果我已经在底部那么它工作正常。我试图让它从当前位置上升
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-latest.min.js"type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="js/bootstrap.min.js"></script>
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
<link rel="icon" href="images/favicon.ico" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="css/main.css">
</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">
</div>
</div>
<div class="container-full">
<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">
<div class="work" style="height:500px; background-color:#f8f8f8"><strong>Projects</strong></div></a>
<a name="Projects" id="work-section">
<div class="work" style="height:500px; background-color:#f8f8f8"><strong>work</strong></div></a>
<footer>
<a href="#top" id="top"><img src="images/up-arrow.png" alt="up-arrow" /> </a>
<div class="social-icons">
<a href=""><img src="images/github-icon.png" alt="github-icon" /></a>
<a href-""><img src="images/linkedin-icon.png" alt="linkedin-icon" /></a>
<a href=""><img src="images/twitter-icon.png" alt="twitter-icon" /></a>
</div>
</footer>
</div> <!-- /container full -->
</body>
</html>
<script>
$(document).ready( function(){
$('a').click(function(){
$('html, body').animate({
scrollTop: $( $(this).attr('href') )
.offset().top}, 700);
return false;
});
$("#top").click(function(e) {
$("html, body").animate({ scrollTop: 0 }, 700);
return false; });
});
</script>
答案 0 :(得分：2)
问题是另一个常规a点击事件处理程序首先运行并在href - 特定目标之前滚动到其top目标。这意味着当您点击top时，它会向下滚动到自身，然后向上滚动。
处理此问题的最佳方法是在页面顶部放置top元素，例如<div class="container-full" id="top">，这样您就不需要两个不同的事件处理程序，它将起作用没有启用JavaScript。
如果您希望保持原样，只需使用<a id="top">从常规a事件处理程序中排除$('a[id!=top]').click(function(){...}：
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-latest.min.js"type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="js/bootstrap.min.js"></script>
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
<link rel="icon" href="images/favicon.ico" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="css/main.css">
</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">
<ul>
<li>html</li>
<li>css</li>
<li>JS</li>
<li>php</li>
<li>java</li>
</ul>
</div>
</div>
<div class="container-full">
<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">
<div class="work" style="height:500px; background-color:#f8f8f8"><strong>Projects</strong></div></a>
<a name="Projects" id="work-section">
<div class="work" style="height:500px; background-color:#f8f8f8"><strong>work</strong></div></a>
<footer>
<a href="#top" id="top"><img src="images/up-arrow.png" alt="up-arrow" /> </a>
<div class="social-icons">
<a href=""><img src="images/github-icon.png" alt="github-icon" /></a>
<a href-""><img src="images/linkedin-icon.png" alt="linkedin-icon" /></a>
<a href=""><img src="images/twitter-icon.png" alt="twitter-icon" /></a>
</div>
</footer>
</div> <!-- /container full -->
</body>
</html>
<script>
$(document).ready( function(){
$('a[id!=top]').click(function(){
$('html, body').animate({
scrollTop: $( $(this).attr('href') )
.offset().top}, 700);
return false;
});
$("#top").click(function(e) {
$("html, body").animate({ scrollTop: 0 }, 700);
return false; });
});
</script>