一页卷轴导航不使用Javascript？
一页卷轴导航不使用Javascript？
提问于 2017-07-15 07:05:06
是的，所以我尝试创建一个简单的一页滚动导航，其中包含一个基本的javascript，当它使用一个函数滚动到这个部分时，它可以动画到1秒。问题是它不起作用了。我有什么想法吗？
Html
<ul class="header-nav">
<li><a id="home" href="#home-View">Home</a></li>
<li><a id="about" href="#about-View">About</a></li>
<li><a href="#">Blog</a></li>
<li><a id="contact" href="#contact-View">Contact</a></li>
</ul>Javascript
$(document).ready(function() {
// add a click listener to each <a> tags
setBindings();
});
function setBindings() {
$(".header-nav a").click(function(e) {
// prevent anchor tags for working (?)
e.preventDefault();
var sectionID = e.currentTarget.id + "Section";
$("html body").animate({
scrollTop: $("#" + sectionID).offset().top
}, 1000)
alert("sdf");
})
}回答 2
Stack Overflow用户
回答已采纳
发布于 2017-07-15 07:16:13
您根据您的id代码选择的jQuery代码无法在标记中找到，这就是为什么它无法工作并控制错误的原因，请尝试如下，
$(document).ready(function() {
// add a click listener to each <a> tags
setBindings();
});
function setBindings() {
$(".header-nav a").click(function(e) {
// prevent anchor tags for working (?)
e.preventDefault();
var sectionID = e.currentTarget.id + "-View";
console.log(sectionID);
$("html,body").animate({
scrollTop: $("#" + sectionID).offset().top
},1000);
alert("sdf");
})
}body {
height: 1200px;
}
#home-View {
margin-top: 50px;
background: red;
height: 200px;
}
#about-View {
margin-top: 50px;
background: red;
height: 200px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="header-nav">
<li><a id="home" href="#home-View">Home</a></li>
<li><a id="about" href="#about-View">About</a></li>
<li><a href="#">Blog</a></li>
<li><a id="contact" href="#contact-View">Contact</a></li>
</ul>
<div id="home-View"></div>
<div id="about-View"></div>
Stack Overflow用户
发布于 2017-07-15 07:14:09
尝试使用此示例导航到元素。
$(document).ready(function() {
// add a click listener to each <a> tags
setBindings();
});
function setBindings() {
$(".header-nav a").click(function(e) {
// prevent anchor tags for working (?)
e.preventDefault();
var sectionID = e.currentTarget.id + "Section";
console.log(sectionID);
$("html body").animate({
scrollTop: $("#" + sectionID).offset().top
}, 1000)
alert("sdf");
})
}#homeSection
{
height:200px;
background-color:red;
border:1px solid #DDD;
}
#aboutSection
{
height:200px;
background-color:white;
border:1px solid #DDD;
}
#blogSection
{
height:200px;
background-color:blue;
border:1px solid #DDD;
}
#contactSection
{
height:200px;
background-color:#DDD;
border:1px solid #DDD;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="header-nav">
<li><a id="home" href="#home-View">Home</a></li>
<li><a id="about" href="#about-View">About</a></li>
<li><a id="blog" href="#">Blog</a></li>
<li><a id="contact" href="#contact-View">Contact</a></li>
</ul>
<div id="homeSection"></div>
<div id="aboutSection"></div>
<div id="blogSection"></div>
<div id="contactSection"></div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/45115479
复制相关文章
相似问题
腾讯云开发者
