我遇到锚点问题。它跳到页面的中间 - 没有平滑的滚动或什么都没有。我读了一些东西，当你的<div>不够长时它不会滚动，所以我试图让它更高，但仍然没有。
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="favicon.ico">
<title></title>
<!--Stylesheets-->
<link rel="stylesheet" href="styles/design.css" type="text/css" media="screen" />
<link rel="stylesheet" type="text/css" href="styles/fonts.css">
<!--[if IE]<link rel="stylesheet" type="text/css" href="styles/msiefonts.css"><![endif]-->
<!--Scripts Here-->
<script src="scripts/jquery-1.11.0.js"></script>
<script src="scripts/scrollable.js"></script>
<script src="scripts/responsive_nav.js"></script>
</head>
<body>
<div id="wrap">
<div class="top-container-box">
<div class="logo">
<img src="pictures/logo.png" alt="logo" />
</div>
</div>
<div class="container">
<div id="scroller-anchor"></div>
<div id="menu">
<div class="nav_logo"></div>
<nav>
<ul class="nav">
<li><a href="#">☰</a></li>
<li><a href="index.php?site=home">Home</a></li>
<li><a href="index.php?site=about">About Me</a></li>
<li><a href="index.php?site=works">Works</a></li>
<li><a href="#contact" rel="" class="anchorLink">Contact</a></li>
</ul>
</nav>
</div>
<div id="break-point"></div>
<div class="lower-container-box">
<section class="textbox">
<p class="first-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint o ccaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<section class="textbox2">
<p class="second-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint o ccaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<section class="textbox3">
<p class="third-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint o ccaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<section class="textbox4">
<a name="contact" id="contact"></a>
<div id="contact_form">
<form name="form1" id="ff" method="post" action="insert.php">
<label>
<span>Name*:</span>
<input type="text" placeholder="Please enter your name" name="name" id="name">
</label>
<label>
<span>City*:</span>
<input type="text" placeholder="Please enter your city" name="city" id="city" required>
</label>
<label>
<span>Phone:</span>
<input type="tel" placeholder="Please enter your phone" name="phone" id="phone">
</label>
<label>
<span>Email*:</span>
<input type="email" placeholder="youremail@gmail.com" name="email" id="email" required>
</label>
<input class="sendButton" type="submit" name="Submit" value="Send">
<!--?php include 'insert.php' ?>-->
</form>
</div>
</section>
<div>
</div>
</div>
<div id="footer">
<div id="footer-container">
<p id="footer-text">Copyright © [] [2014] All Rights Reserved!</p>
<ul>
<li><a href="index.php?site=home">Home</a></li>
<li><a href="index.php?site=about">About Me</a></li>
<li><a href="index.php?site=works">Works</a></li>
<li><a href="index.php?site=contact">Contact</a></li>
</ul>
</div>
</div>
</div>
<!--<script src="scripts/sticky.js"></script>-->
</body>
</html>
使用Javascript：
$(document).ready(function () {
$(document).on("click", 'a[href^="#"]', function () {
$('html, body').animate({
scrollTop: $($.attr(this, 'href')).offset().top
}, 500);
return false;
});
});
答案 0 :(得分：3)
您有两个具有相同id属性的元素。它被禁止并导致您的问题。从id中的锚点中移除<li>，一切都会好的。
<li><a href="#contact" rel="" class="anchorLink">Contact</a></li>
以下是工作示例的链接： jsFiddle
修改：
当然，请记住使用$(document).ready方法或其快捷方式包装jQuery：
$(function() {
$('a').click(function () {
$('html, body').animate({
scrollTop: $($.attr(this, 'href')).offset().top
}, 500);
return false;
});
});