您正在将事件附加到未定义的变量
滚动不使用animate函数，当单击锚点标记时，它不会滚动到部分。我已经实现了侧边栏和侧边栏中添加的所有内容
这些代码都在页面侧边栏中，所以当我们点击href选项卡时，它不会转到那个特定的部分。添加了所有的示例代码，并尝试了更多的修改，但仍然无法在单击选项卡时滚动到特定的部分。
<div class="side-overlay" id="side-overlay">
<div class="faq_sidebar" id="faqs">
<div class="container-fluid faq-section1">
<div class="row">
<div class="col-md-11">
<h5 class="subscription-subhead">
FAQ’s
</h5>
<h2 class="subscription-title js-scroll fade-in-bottom">
You have questions,
we have answers
</h2>
</div>
<div class="col-md-1 faq_close">
<a href="javascript:void(0)" id="closefaqx" class="closebtn_faq" onclick="closeFaq()"><img src="./images/cross X.png" alt="" class="closebar"></a>
</div>
</div>
</div>
<div class="faq_section2">
<nav class="navigation" id="mainNav">
<a class="navigation__link" href="#1">What is Lorem Ipsum?</a>
<a class="navigation__link" href="#2">Why do we use it?</a>
<a class="navigation__link" href="#3">Where does it come from?</a>
<a class="navigation__link" href="#4">Where can I get some?</a>
<a class="navigation__link" href="#5">What is Lorem Ipsum?</a>
</nav>
<div class="tab-content">
<div class="nestednav">
<div class="page-section hero" id="1">
<h1>section 1</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, incidunt eos provident dolore illum veniam molestias beatae eveniet molestiae aliquid soluta cum iste nam, necessitatibus repellat totam, pariatur est tenetur?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, incidunt eos provident dolore illum veniam molestias beatae eveniet molestiae aliquid soluta cum iste nam, necessitatibus repellat totam, pariatur est tenetur?</p>
</div>
<div class="page-section" id="2">
<h1>section 2</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, incidunt eos provident dolore illum veniam molestias beatae eveniet molestiae aliquid soluta cum iste nam, necessitatibus repellat totam, pariatur est tenetur?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, incidunt eos provident dolore illum veniam molestias beatae eveniet molestiae aliquid soluta cum iste nam, necessitatibus repellat totam, pariatur est tenetur?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, incidunt eos provident dolore illum veniam molestias beatae eveniet molestiae aliquid soluta cum iste nam, necessitatibus repellat totam, pariatur est tenetur?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, incidunt eos provident dolore illum veniam molestias beatae eveniet molestiae aliquid soluta cum iste nam, necessitatibus repellat totam, pariatur est tenetur?</p>
</div>
<div class="page-section" id="3">
<h1>Section Three</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, incidunt eos provident dolore illum veniam molestias beatae eveniet molestiae aliquid soluta cum iste nam, necessitatibus repellat totam, pariatur est tenetur?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, incidunt eos provident dolore illum veniam molestias beatae eveniet molestiae aliquid soluta cum iste nam, necessitatibus repellat totam, pariatur est tenetur?</p>
</div>
<div class="page-section" id="4">
<h1>Section Four</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, incidunt eos provident dolore illum veniam molestias beatae eveniet molestiae aliquid soluta cum iste nam, necessitatibus repellat totam, pariatur est tenetur?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, incidunt eos provident dolore illum veniam molestias beatae eveniet molestiae aliquid soluta cum iste nam, necessitatibus repellat totam, pariatur est tenetur?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, incidunt eos provident dolore illum veniam molestias beatae eveniet molestiae aliquid soluta cum iste nam, necessitatibus repellat totam, pariatur est tenetur?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, incidunt eos provident dolore illum veniam molestias beatae eveniet molestiae aliquid soluta cum iste nam, necessitatibus repellat totam, pariatur est tenetur?</p>
</div>
<div class="page-section" id="5">
<h1>Section Five</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, incidunt eos provident dolore illum veniam molestias beatae eveniet molestiae aliquid soluta cum iste nam, necessitatibus repellat totam, pariatur est tenetur?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, incidunt eos provident dolore illum veniam molestias beatae eveniet molestiae aliquid soluta cum iste nam, necessitatibus repellat totam, pariatur est tenetur?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, incidunt eos provident dolore illum veniam molestias beatae eveniet molestiae aliquid soluta cum iste nam, necessitatibus repellat totam, pariatur est tenetur?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, incidunt eos provident dolore illum veniam molestias beatae eveniet molestiae aliquid soluta cum iste nam, necessitatibus repellat totam, pariatur est tenetur?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, incidunt eos provident dolore illum veniam molestias beatae eveniet molestiae aliquid soluta cum iste nam, necessitatibus repellat totam, pariatur est tenetur?</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
**
$(document).ready(function () {
$('a[href*=\#]').bind('click', function (e) {
// e.preventDefault(); // prevent hard jump, the default behavior
var target = $(this).attr("href");
console.log(target);
$('html, body').animate({
scrollTop: $(target).offset().top
}, 600);
});
});
e.addEventListener('scroll', () => {
var scrollDistance = $(window).scrollTop();
// Assign active class to nav links while scolling
$('.page-section').each(function (i) {
if ($(this).position().top <= scrollDistance) {
$('.navigation a.active').removeClass('active');
$('.navigation a').eq(i).addClass('active');
}
});
});
//
$(document).ready(function () {
var fixmeTop = $('.navigation a').offset().top; // get initial position of the element
e.addEventListener('scroll', () => {
var navlast = document.getElementsByClassName('navigation');
var lastLi = navlast[navlast.length - 1];
var currentScroll = $(window).scrollTop(); // get current position
if (currentScroll >= fixmeTop) {
console.log("Greater value");
$('.navigation').css({
position: 'absolute',
top: '50px',
float: 'left'
});
}
else {
console.log("Smaller value");
$('.navigation').css({
position: 'fixed',
top: '80px',
float: 'left'
});
}
});
});
**
e。使用window会取得更大的成功。
$(document).ready(function () {
$('a[href*=\#]').bind('click', function (e) {
// e.preventDefault(); // prevent hard jump, the default behavior
var target = $(this).attr("href");
console.log(target);
$('html, body').animate({
scrollTop: $(target).offset().top
}, 600);
});
});
window.addEventListener('scroll', () => {
var scrollDistance = $(window).scrollTop();
// Assign active class to nav links while scolling
$('.page-section').each(function (i) {
if ($(this).position().top <= scrollDistance) {
$('.navigation a.active').removeClass('active');
$('.navigation a').eq(i).addClass('active');
}
});
});
//
$(document).ready(function () {
var fixmeTop = $('.navigation a').offset().top; // get initial position of the element
window.addEventListener('scroll', () => {
var navlast = document.getElementsByClassName('navigation');
var lastLi = navlast[navlast.length - 1];
var currentScroll = $(window).scrollTop(); // get current position
if (currentScroll >= fixmeTop) {
console.log("Greater value");
$('.navigation').css({
position: 'absolute',
top: '50px',
float: 'left'
});
}
else {
console.log("Smaller value");
$('.navigation').css({
position: 'fixed',
top: '80px',
float: 'left'
});
}
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="side-overlay" id="side-overlay">
<div class="faq_sidebar" id="faqs">
<div class="container-fluid faq-section1">
<div class="row">
<div class="col-md-11">
<h5 class="subscription-subhead">
FAQ’s
</h5>
<h2 class="subscription-title js-scroll fade-in-bottom">
You have questions,
we have answers
</h2>
</div>
<div class="col-md-1 faq_close">
<a href="javascript:void(0)" id="closefaqx" class="closebtn_faq" onclick="closeFaq()"><img src="./images/cross X.png" alt="" class="closebar"></a>
</div>
</div>
</div>
<div class="faq_section2">
<nav class="navigation" id="mainNav">
<a class="navigation__link" href="#1">What is Lorem Ipsum?</a>
<a class="navigation__link" href="#2">Why do we use it?</a>
<a class="navigation__link" href="#3">Where does it come from?</a>
<a class="navigation__link" href="#4">Where can I get some?</a>
<a class="navigation__link" href="#5">What is Lorem Ipsum?</a>
</nav>
<div class="tab-content">
<div class="nestednav">
<div class="page-section hero" id="1">
<h1>section 1</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, incidunt eos provident dolore illum veniam molestias beatae eveniet molestiae aliquid soluta cum iste nam, necessitatibus repellat totam, pariatur est tenetur?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, incidunt eos provident dolore illum veniam molestias beatae eveniet molestiae aliquid soluta cum iste nam, necessitatibus repellat totam, pariatur est tenetur?</p>
</div>
<div class="page-section" id="2">
<h1>section 2</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, incidunt eos provident dolore illum veniam molestias beatae eveniet molestiae aliquid soluta cum iste nam, necessitatibus repellat totam, pariatur est tenetur?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, incidunt eos provident dolore illum veniam molestias beatae eveniet molestiae aliquid soluta cum iste nam, necessitatibus repellat totam, pariatur est tenetur?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, incidunt eos provident dolore illum veniam molestias beatae eveniet molestiae aliquid soluta cum iste nam, necessitatibus repellat totam, pariatur est tenetur?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, incidunt eos provident dolore illum veniam molestias beatae eveniet molestiae aliquid soluta cum iste nam, necessitatibus repellat totam, pariatur est tenetur?</p>
</div>
<div class="page-section" id="3">
<h1>Section Three</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, incidunt eos provident dolore illum veniam molestias beatae eveniet molestiae aliquid soluta cum iste nam, necessitatibus repellat totam, pariatur est tenetur?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, incidunt eos provident dolore illum veniam molestias beatae eveniet molestiae aliquid soluta cum iste nam, necessitatibus repellat totam, pariatur est tenetur?</p>
</div>
<div class="page-section" id="4">
<h1>Section Four</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, incidunt eos provident dolore illum veniam molestias beatae eveniet molestiae aliquid soluta cum iste nam, necessitatibus repellat totam, pariatur est tenetur?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, incidunt eos provident dolore illum veniam molestias beatae eveniet molestiae aliquid soluta cum iste nam, necessitatibus repellat totam, pariatur est tenetur?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, incidunt eos provident dolore illum veniam molestias beatae eveniet molestiae aliquid soluta cum iste nam, necessitatibus repellat totam, pariatur est tenetur?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, incidunt eos provident dolore illum veniam molestias beatae eveniet molestiae aliquid soluta cum iste nam, necessitatibus repellat totam, pariatur est tenetur?</p>
</div>
<div class="page-section" id="5">
<h1>Section Five</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, incidunt eos provident dolore illum veniam molestias beatae eveniet molestiae aliquid soluta cum iste nam, necessitatibus repellat totam, pariatur est tenetur?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, incidunt eos provident dolore illum veniam molestias beatae eveniet molestiae aliquid soluta cum iste nam, necessitatibus repellat totam, pariatur est tenetur?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, incidunt eos provident dolore illum veniam molestias beatae eveniet molestiae aliquid soluta cum iste nam, necessitatibus repellat totam, pariatur est tenetur?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, incidunt eos provident dolore illum veniam molestias beatae eveniet molestiae aliquid soluta cum iste nam, necessitatibus repellat totam, pariatur est tenetur?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, incidunt eos provident dolore illum veniam molestias beatae eveniet molestiae aliquid soluta cum iste nam, necessitatibus repellat totam, pariatur est tenetur?</p>
</div>
</div>
</div>
</div>
</div>
</div>为什么？
addEventListener()需要事件侦听器连接到的目标。点击此处了解更多信息。
还要问问自己什么是e？它经常被用作事件处理程序函数中事件目标的引用，缩写如下，例如：
x.addEventListener('foo', function(e) {...}
关于这个庞大的对象有很多文档，但我建议您自己在控制台中进行探索。尝试将上面的一行更改为：
window.addEventListener('scroll', (e) => { console.log(e); ...
并在浏览器的检查器中查看输出。
如果有人想找到答案，下面的代码对我来说很好
$(document).ready(function () {
$('a[href*=\#]').bind('click', function (e) {
var target = $(this).attr("href");
console.log(target);
$('.tab-content').animate();
});
});
e.addEventListener('scroll', () => {
var scrollDistance = $(window).scrollTop();
// Assign active class to nav links while scolling
$('.page-section').each(function (i) {
if ($(this).position().top <= scrollDistance) {
$('.navigation a.active').removeClass('active');
$('.navigation a').eq(i).addClass('active');
}
});
});
//
$(document).ready(function () {
var fixmeTop = $('.navigation a').offset().top; // get initial position of the element
var fixmeTop2 = $('.tab-content').offset().top;
e.addEventListener('wheel', (event) => {
fixmeTop2 = $('.nestednav').offset().top;
if (event.deltaY >= 20) {
$('.navigation').css({
position: 'fixed',
top: '10px',
float: 'left'
});
}
else if(fixmeTop2 >= 15) {
$('.navigation').css({
position: 'absolute',
top: '180px',
float: 'left'
});
}
});
});