我试图滚动到代码中的特定 div，但它不起作用。我搜索了很多，也在其他资源中找到了相同的代码。
即使页面向下滚动，我还需要保持导航栏 div 可见。
<!DOCTYPE html>
<html>
<head>
<title>Name</title>
<link rel="stylesheet" type="text/css" href="index.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
function goToByScroll(id){
// Reove "link" from the ID
//id = id.replace("link", "");
// Scroll
console.log("clicked "+id);
$('html,body').animate({
scrollTop: $("#"+id).offset().top},
'slow');
}
$("#nav_bar_menu > div > a").click(function(e) {
// Prevent a page reload when a link is pressed
console.log("Clicked "+ e);
e.preventDefault();
// Call the scroll function
goToByScroll($(this).attr("id"));
});
</script>
</head>
<body>
<div class="nav">
<div id="landing_profile"> <img src="me.jpg" class="profile_img"> </div>
<div class="nav_bar" id="nav_bar_menu">
<div id="home"> <a href="#" onclick="goToByScroll('home')">Home</a> </div>
<div id="about_me"> <a href="#" onclick="goToByScroll('about_me')">About me</a> </div>
<div id="projects"> <a href="#" onclick="goToByScroll('projects')">Projects</a> </div>
<div id="contact"> <a href="#" onclick="goToByScroll('contact')">Contact</a> </div>
</div>
</div>
<div id="main">
<div id="home">
<h1>Home</h1>
<p>dslajdlajd;ajsdas
dsdasdadadsasdadadaaaaaaaaaaascs d as da dsa d ad ad ad adsa
das da d.a d.a da dadnfnos iaiyd iayd iaD DIADIGDHASHL DADad
d aids AODU OADU OUDOS DO DO DOUD OUD Aduod pa dds dslajdlajd;ajsdas
dslajdlajd;ajsdas
dsdasdadadsasdadadaaaaaaaaaaascs d as da dsa d ad ad ad adsa
das da d.a d.a da dadnfnos iaiyd iayd iaD DIADIGDHASHL DADad
d aids AODU OADU OUDOS DO DO DOUD OUD Aduod pa dds</p>
</div>
<div id="about_me">
<h1>About me</h1>
<p>dslajdlajd;ajsdas
dsdasdadadsasdadadaaaaaaaaaaascs d as da dsa d ad ad ad adsa
das da d.a d.a da dadnfnos iaiyd iayd iaD DIADIGDHASHL DADad
d aids AODU OADU OUDOS DO DO DOUD OUD Aduod pa dds dslajdlajd;ajsdas
dsdasdadadsasdadadaaaaaaaaaaascs d as da dsa d ad ad ad adsa
das da d.a d.a da dadnfnos iaiyd iayd iaD DIADIGDHASHL DADad
d aids AODU OADU OUDOS DO DO DOUD OUD Aduod pa dds</p>
</div>
<div id="projects">
<h1>Projects</h1>
<p>dslajdlajd;ajsdas
dsdasdadadsasdadadaaaaaaaaaaascs d as da dsa d ad ad ad adsa
dsdasdadadsasdadadaaaaaaaaaaascs d as da dsa d ad ad ad adsa
das da d.a d.a da dadnfnos iaiyd iayd iaD DIADIGDHASHL DADad
d aids AODU OADU OUDOS DO DO DOUD OUD Aduod pa dds</p>
</div>
<div id="contact">
<h1>Contact</h1>
<p>Mail me at</p>
<a target="_top" href="mailto:me@gmail.com">me@gmail.com</a>
<br><br>
</div>
</div>
</body>
</html>
最佳答案
问题是您的 ID 重复。例如，您尝试滚动到带有 id="contact" 的元素，结果确实如此!只是它是第一个(菜单中的 id)而不是第二个(您要访问的部分)。
解决方案:为所有内容提供唯一的 id。
要防止发生此类问题，请通过 W3C validator 运行您的代码，它会指出这样的错误。
我在您的代码中看到的另一个问题是您有两个相互干扰的点击例程。我注释掉了一个。
编辑:哦，你的另一句话。 (这个问题确实应该是一个单独的问题。)
要在页面滚动时保持导航栏可见，请为其指定 position:fixed。
function goToByScroll(id) {
// Reove "link" from the ID
//id = id.replace("link", "");
// Scroll
console.log("clicked " + id);
$('html,body').animate({
scrollTop: $("#" + id).offset().top
},
'slow');
}
/*
$("#nav_bar_menu > div > a").click(function(e) {
// Prevent a page reload when a link is pressed
console.log("Clicked " + e);
e.preventDefault();
// Call the scroll function
goToByScroll($(this).parent().attr("id"));
});
*/.nav {position:fixed; background:white; top:0; left:0; width:7em;}
body {padding-left:7em}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="nav">
<div id="landing_profile">
<img src="me.jpg" class="profile_img">
</div>
<div class="nav_bar" id="nav_bar_menu">
<div id="home"> <a href="#" onclick="goToByScroll('home_section')">Home</a>
</div>
<div id="about_me"> <a href="#" onclick="goToByScroll('about_me_section')">About me</a>
</div>
<div id="projects"> <a href="#" onclick="goToByScroll('projects_section')">Projects</a>
</div>
<div id="contact"> <a href="#" onclick="goToByScroll('contact_section')">Contact</a>
</div>
</div>
</div>
<div id="main">
<div id="home_section">
<h1>Home</h1>
<p>dslajdlajd;ajsdas dsdasdadadsasdadadaaaaaaaaaaascs d as da dsa d ad ad ad adsa das da d.a d.a da dadnfnos iaiyd iayd iaD DIADIGDHASHL DADad d aids AODU OADU OUDOS DO DO DOUD OUD Aduod pa dds dslajdlajd;ajsdas dslajdlajd;ajsdas dsdasdadadsasdadadaaaaaaaaaaascs
d as da dsa d ad ad ad adsa das da d.a d.a da dadnfnos iaiyd iayd iaD DIADIGDHASHL DADad d aids AODU OADU OUDOS DO DO DOUD OUD Aduod pa dds</p>
</div>
<div id="about_me_section">
<h1>About me</h1>
<p>dslajdlajd;ajsdas dsdasdadadsasdadadaaaaaaaaaaascs d as da dsa d ad ad ad adsa das da d.a d.a da dadnfnos iaiyd iayd iaD DIADIGDHASHL DADad d aids AODU OADU OUDOS DO DO DOUD OUD Aduod pa dds dslajdlajd;ajsdas dsdasdadadsasdadadaaaaaaaaaaascs d as
da dsa d ad ad ad adsa das da d.a d.a da dadnfnos iaiyd iayd iaD DIADIGDHASHL DADad d aids AODU OADU OUDOS DO DO DOUD OUD Aduod pa dds</p>
</div>
<div id="projects_section">
<h1>Projects</h1>
<p>dslajdlajd;ajsdas dsdasdadadsasdadadaaaaaaaaaaascs d as da dsa d ad ad ad adsa dsdasdadadsasdadadaaaaaaaaaaascs d as da dsa d ad ad ad adsa das da d.a d.a da dadnfnos iaiyd iayd iaD DIADIGDHASHL DADad d aids AODU OADU OUDOS DO DO DOUD OUD Aduod pa
dds</p>
</div>
<div id="contact_section">
<h1>Contact</h1>
<p>Mail me at</p>
<a target="_top" href="mailto:me@gmail.com">me@gmail.com</a>
<br>
<br>
</div>
</div>关于javascript - 滚动到 div 不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32548071/