我正在尝试激活每个部分的菜单(当滚动到达该元素位置时)。但是,我发现最后一部分(联系部分)未激活,而滚动到达结束。如何解决此问题以及是否有任何可能的方法来获得滚动的确切位置(这意味着滚动顶部和部分顶部是相等的值)。见JsFiddle
var scrollLink = $(".scroll");
scrollLink.click(function(e) {
e.preventDefault();
var scroll_linkPosition = $(this.hash).offset().top - 70;
$("body, html").animate({
scrollTop: scroll_linkPosition
}, 1000);
});
$(document).scroll(function() {
var scroll_position = $(document).scrollTop();
console.log(scroll_position);
scrollLink.each(function() {
var sectionOffsetTop = $(this.hash).offset().top - 70;
if(sectionOffsetTop <= scroll_position) {
$(this).parent().siblings().removeClass("active");
$(this).parent().addClass("active");
$(this.hash).addClass("active");
}
}, 1000);
});
&#13;
/*----*/
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
font-family: sans-serif;
font-size: 14px;
line-height: 21px;
}
.container {
max-width: 1170px;
margin: 0 auto;
padding-left: 10px
padding-right: 10px;
}
.clearfix::before, .clearfix::after {
display: table;
content: "";
}
.clearfix::after {
clear: both;
}
header {
background: #f6f6f6;
padding: 20px 0;
line-height: 31px;
position: fixed;
top: 0;
left: 0;
width: 100%;
}
.header_innrWrapper {
padding: 0 20px;
}
.logo {
float: left;
}
.logo a {
font-size: 27px;
color: #333;
text-decoration: none;
display: block;
}
ul {
padding: 0;
margin: 0;
}
ul li {
list-style-type: none;
}
.header_innrWrapper ul {
float: right;
}
.header_innrWrapper ul li {
float: left;
min-width: 70px;
text-align: center;
margin-left: 2px;
}
.header_innrWrapper ul li.active a {
background: #3f3d48;
color: #fff;
}
.header_innrWrapper ul li a {
display: block;
color: #464646;
text-decoration: none;
}
.wrapper {
padding-top: 70px;
}
.wrapper_article {
padding: 40px 20px;
}
.wrapper_article h2 {
padding-bottom: 15px;
}
.wrapper_article p {
margin-bottom: 15px;
}
.wrapper_article p.no-mar {
margin: 0 !important;
}
#home {
background: #b0deff;
}
#about {
background: #fff58a;
}
#service {
background: #5bff50;
}
#feature {
background: #ffb4bb;
}
#contact {
background: #fff58a;
}
@media (max-width: 800px) {
.container {
max-width: 700px;
}
}
@media (max-width: 500px) {
.container {
max-width: 500px;
}
}
&#13;
<header>
<div class="container">
<div class="header_innrWrapper clearfix">
<div class="logo"><a href="#">Logo</a></div>
<ul class="clearfix">
<li class="active"><a class="nav_anchor scroll" href="#home">Home</a></li>
<li><a class="nav_anchor scroll" href="#about">About</a></li>
<li><a class="nav_anchor scroll" href="#service">Service</a></li>
<li><a class="nav_anchor scroll" href="#feature">Feature</a></li>
<li><a class="nav_anchor scroll" href="#contact">Contact</a></li>
</ul>
</div>
</div>
</header>
<div class="container">
<section class="wrapper">
<div id="home" class="wrapper_article">
<h2>Home Section</h2>
<p>Creating custom graphics with a real wow factor requires a suite of essential tools that can be a real difference maker for a fast and easy creation of visual content without any design experience.
Creating custom graphics with a real wow factor requires a suite of essential tools that can be a real difference maker for a fast and easy creation of visual content without any design experience.
Creating custom graphics with a real wow factor requires a suite of essential tools that can be a real difference maker for a fast and easy creation of visual content without any design experience.
Creating custom graphics with a real wow factor requires a suite of essential tools that can be a real difference maker for a fast and easy creation of visual content without any design experience.
Creating custom graphics with a real wow factor requires a suite of essential tools that can be a real difference maker for a fast and easy creation of visual content without any design experience.
Creating custom graphics with a real wow factor requires a suite of essential tools that can be a real difference maker for a fast and easy creation of visual content without any design experience.</p>
<p class="no-mar">Creating custom graphics with a real wow factor requires a suite of essential tools that can be a real difference maker for a fast and easy creation of visual content without any design experience.
Creating custom graphics with a real wow factor requires a suite of essential tools that can be a real difference maker for a fast and easy creation of visual content without any design experience.
Creating custom graphics with a real wow factor requires a suite of essential tools that can be a real difference maker for a fast and easy creation of visual content without any design experience.
Creating custom graphics with a real wow factor requires a suite of essential tools that can be a real difference maker for a fast and easy creation of visual content without any design experience.
Creating custom graphics with a real wow factor requires a suite of essential tools that can be a real difference maker for a fast and easy creation of visual content without any design experience.
Creating custom graphics with a real wow factor requires a suite of essential tools that can be a real difference maker for a fast and easy creation of visual content without any design experience.</p>
</div>
<div id="about" class="wrapper_article">
<h2>About Section</h2>
<p>Creating custom graphics with a real wow factor requires a suite of essential tools that can be a real difference maker for a fast and easy creation of visual content without any design experience.
Creating custom graphics with a real wow factor requires a suite of essential tools that can be a real difference maker for a fast and easy creation of visual content without any design experience.
Creating custom graphics with a real wow factor requires a suite of essential tools that can be a real difference maker for a fast and easy creation of visual content without any design experience.
Creating custom graphics with a real wow factor requires a suite of essential tools that can be a real difference maker for a fast and easy creation of visual content without any design experience.
Creating custom graphics with a real wow factor requires a suite of essential tools that can be a real difference maker for a fast and easy creation of visual content without any design experience.
Creating custom graphics with a real wow factor requires a suite of essential tools that can be a real difference maker for a fast and easy creation of visual content without any design experience.</p>
<p class="no-mar">Creating custom graphics with a real wow factor requires a suite of essential tools that can be a real difference maker for a fast and easy creation of visual content without any design experience.
Creating custom graphics with a real wow factor requires a suite of essential tools that can be a real difference maker for a fast and easy creation of visual content without any design experience.
Creating custom graphics with a real wow factor requires a suite of essential tools that can be a real difference maker for a fast and easy creation of visual content without any design experience.
Creating custom graphics with a real wow factor requires a suite of essential tools that can be a real difference maker for a fast and easy creation of visual content without any design experience.
Creating custom graphics with a real wow factor requires a suite of essential tools that can be a real difference maker for a fast and easy creation of visual content without any design experience.
Creating custom graphics with a real wow factor requires a suite of essential tools that can be a real difference maker for a fast and easy creation of visual content without any design experience.</p>
</div>
<div id="service" class="wrapper_article">
<h2>Service Section</h2>
<p>Creating custom graphics with a real wow factor requires a suite of essential tools that can be a real difference maker for a fast and easy creation of visual content without any design experience.
Creating custom graphics with a real wow factor requires a suite of essential tools that can be a real difference maker for a fast and easy creation of visual content without any design experience.
Creating custom graphics with a real wow factor requires a suite of essential tools that can be a real difference maker for a fast and easy creation of visual content without any design experience.
Creating custom graphics with a real wow factor requires a suite of essential tools that can be a real difference maker for a fast and easy creation of visual content without any design experience.
Creating custom graphics with a real wow factor requires a suite of essential tools that can be a real difference maker for a fast and easy creation of visual content without any design experience.
Creating custom graphics with a real wow factor requires a suite of essential tools that can be a real difference maker for a fast and easy creation of visual content without any design experience.</p>
<p class="no-mar">Creating custom graphics with a real wow factor requires a suite of essential tools that can be a real difference maker for a fast and easy creation of visual content without any design experience.
Creating custom graphics with a real wow factor requires a suite of essential tools that can be a real difference maker for a fast and easy creation of visual content without any design experience.
Creating custom graphics with a real wow factor requires a suite of essential tools that can be a real difference maker for a fast and easy creation of visual content without any design experience.
Creating custom graphics with a real wow factor requires a suite of essential tools that can be a real difference maker for a fast and easy creation of visual content without any design experience.
Creating custom graphics with a real wow factor requires a suite of essential tools that can be a real difference maker for a fast and easy creation of visual content without any design experience.
Creating custom graphics with a real wow factor requires a suite of essential tools that can be a real difference maker for a fast and easy creation of visual content without any design experience.</p>
</div>
<div id="feature" class="wrapper_article">
<h2>Feature Section</h2>
<p>Creating custom graphics with a real wow factor requires a suite of essential tools that can be a real difference maker for a fast and easy creation of visual content without any design experience.
Creating custom graphics with a real wow factor requires a suite of essential tools that can be a real difference maker for a fast and easy creation of visual content without any design experience.
Creating custom graphics with a real wow factor requires a suite of essential tools that can be a real difference maker for a fast and easy creation of visual content without any design experience.
Creating custom graphics with a real wow factor requires a suite of essential tools that can be a real difference maker for a fast and easy creation of visual content without any design experience.
Creating custom graphics with a real wow factor requires a suite of essential tools that can be a real difference maker for a fast and easy creation of visual content without any design experience.
Creating custom graphics with a real wow factor requires a suite of essential tools that can be a real difference maker for a fast and easy creation of visual content without any design experience.</p>
<p>Creating custom graphics with a real wow factor requires a suite of essential tools that can be a real difference maker for a fast and easy creation of visual content without any design experience.
Creating custom graphics with a real wow factor requires a suite of essential tools that can be a real difference maker for a fast and easy creation of visual content without any design experience.
Creating custom graphics with a real wow factor requires a suite of essential tools that can be a real difference maker for a fast and easy creation of visual content without any design experience.
Creating custom graphics with a real wow factor requires a suite of essential tools that can be a real difference maker for a fast and easy creation of visual content without any design experience.
Creating custom graphics with a real wow factor requires a suite of essential tools that can be a real difference maker for a fast and easy creation of visual content without any design experience.
Creating custom graphics with a real wow factor requires a suite of essential tools that can be a real difference maker for a fast and easy creation of visual content without any design experience.</p>
<p class="no-mar">Creating custom graphics with a real wow factor requires a suite of essential tools that can be a real difference maker for a fast and easy creation of visual content without any design experience.
Creating custom graphics with a real wow factor requires a suite of essential tools that can be a real difference maker for a fast and easy creation of visual content without any design experience.
Creating custom graphics with a real wow factor requires a suite of essential tools that can be a real difference maker for a fast and easy creation of visual content without any design experience.
Creating custom graphics with a real wow factor requires a suite of essential tools that can be a real difference maker for a fast and easy creation of visual content without any design experience.
Creating custom graphics with a real wow factor requires a suite of essential tools that can be a real difference maker for a fast and easy creation of visual content without any design experience.
Creating custom graphics with a real wow factor requires a suite of essential tools that can be a real difference maker for a fast and easy creation of visual content without any design experience.</p>
</div>
<div id="contact" class="wrapper_article">
<h2>Contact Section</h2>
<p>Creating custom graphics with a real wow factor requires a suite of essential tools that can be a real difference maker for a fast and easy creation of visual content without any design experience.
Creating custom graphics with a real wow factor requires a suite of essential tools that can be a real difference maker for a fast and easy creation of visual content without any design experience.
Creating custom graphics with a real wow factor requires a suite of essential tools that can be a real difference maker for a fast and easy creation of visual content without any design experience.
</p>
</div>
</section>
</div>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
&#13;
答案 0 :(得分:0)
check this updated code:
https://jsfiddle.net/f99L0ssp/31/
changes made are:
#contact {
background: #fff58a;
padding-bottom: 300px; //added this line
}
var sectionOffsetTop = $(this.hash).offset().top - 80; //changed from 70 to 80
答案 1 :(得分:0)
滚动到div开始
$("#button").click(function() {
$('html, body').animate({
scrollTop: $("#myDiv").offset().top
}, 2000);
});
答案 2 :(得分:0)
这是测试
var $win = $("html");
var scrollLink = $(".scroll");
scrollLink.click(function(e) {
e.preventDefault();
var scroll_linkPosition = $(this.hash).offset().top - 70;
$win.animate({
scrollTop: scroll_linkPosition
}, 1000);
});
$(document).scroll(function() {
var scroll_position = $(document).scrollTop();
scrollLink.each(function() {
var sectionOffsetTop = $(this.hash).offset().top - 80;
var docDiff = 718; // fix for last div
if(sectionOffsetTop <= scroll_position || ($win.scrollTop() + docDiff >= $(document).height())) {
$(this).parent().siblings().removeClass("active");
$(this).parent().addClass("active");
$(this.hash).addClass("active");
}
}, 1000);
});
/*----*/
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
font-family: sans-serif;
font-size: 14px;
line-height: 21px;
}
.container {
max-width: 1170px;
margin: 0 auto;
padding-left: 10px
padding-right: 10px;
}
.clearfix::before, .clearfix::after {
display: table;
content: "";
}
.clearfix::after {
clear: both;
}
header {
background: #f6f6f6;
padding: 20px 0;
line-height: 31px;
position: fixed;
top: 0;
left: 0;
width: 100%;
}
.header_innrWrapper {
padding: 0 20px;
}
.logo {
float: left;
}
.logo a {
font-size: 27px;
color: #333;
text-decoration: none;
display: block;
}
ul {
padding: 0;
margin: 0;
}
ul li {
list-style-type: none;
}
.header_innrWrapper ul {
float: right;
}
.header_innrWrapper ul li {
float: left;
min-width: 70px;
text-align: center;
margin-left: 2px;
}
.header_innrWrapper ul li.active a {
background: #3f3d48;
color: #fff;
}
.header_innrWrapper ul li a {
display: block;
color: #464646;
text-decoration: none;
}
.wrapper {
padding-top: 70px;
}
.wrapper_article {
padding: 40px 20px;
}
.wrapper_article h2 {
padding-bottom: 15px;
}
.wrapper_article p {
margin-bottom: 15px;
}
.wrapper_article p.no-mar {
margin: 0 !important;
}
#home {
background: #b0deff;
}
#about {
background: #fff58a;
}
#service {
background: #5bff50;
}
#feature {
background: #ffb4bb;
}
#contact {
background: #fff58a;
padding-bottom: 300px;
}
@media (max-width: 800px) {
.container {
max-width: 700px;
}
}
@media (max-width: 500px) {
.container {
max-width: 500px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<div class="container">
<div class="header_innrWrapper clearfix">
<div class="logo"><a href="#">Logo</a></div>
<ul class="clearfix">
<li class="active"><a class="nav_anchor scroll" href="#home">Home</a></li>
<li><a class="nav_anchor scroll" href="#about">About</a></li>
<li><a class="nav_anchor scroll" href="#service">Service</a></li>
<li><a class="nav_anchor scroll" href="#feature">Feature</a></li>
<li><a class="nav_anchor scroll" href="#contact">Contact</a></li>
</ul>
</div>
</div>
</header>
<div class="container">
<section class="wrapper">
<div id="home" class="wrapper_article">
<h2>Home Section</h2>
<p>Creating custom graphics with a real wow factor requires a suite of essential tools that can be a real difference maker for a fast and easy creation of visual content without any design experience.
Creating custom graphics with a real wow factor requires a suite of essential tools that can be a real difference maker for a fast and easy creation of visual content without any design experience.
Creating custom graphics with a real wow factor requires a suite of essential tools that can be a real difference maker for a fast and easy creation of visual content without any design experience.
Creating custom graphics with a real wow factor requires a suite of essential tools that can be a real difference maker for a fast and easy creation of visual content without any design experience.
Creating custom graphics with a real wow factor requires a suite of essential tools that can be a real difference maker for a fast and easy creation of visual content without any design experience.
Creating custom graphics with a real wow factor requires a suite of essential tools that can be a real difference maker for a fast and easy creation of visual content without any design experience.</p>
<p class="no-mar">Creating custom graphics with a real wow factor requires a suite of essential tools that can be a real difference maker for a fast and easy creation of visual content without any design experience.
Creating custom graphics with a real wow factor requires a suite of essential tools that can be a real difference maker for a fast and easy creation of visual content without any design experience.
Creating custom graphics with a real wow factor requires a suite of essential tools that can be a real difference maker for a fast and easy creation of visual content without any design experience.
Creating custom graphics with a real wow factor requires a suite of essential tools that can be a real difference maker for a fast and easy creation of visual content without any design experience.
Creating custom graphics with a real wow factor requires a suite of essential tools that can be a real difference maker for a fast and easy creation of visual content without any design experience.
Creating custom graphics with a real wow factor requires a suite of essential tools that can be a real difference maker for a fast and easy creation of visual content without any design experience.</p>
</div>
<div id="about" class="wrapper_article">
<h2>About Section</h2>
<p>Creating custom graphics with a real wow factor requires a suite of essential tools that can be a real difference maker for a fast and easy creation of visual content without any design experience.
Creating custom graphics with a real wow factor requires a suite of essential tools that can be a real difference maker for a fast and easy creation of visual content without any design experience.
Creating custom graphics with a real wow factor requires a suite of essential tools that can be a real difference maker for a fast and easy creation of visual content without any design experience.
Creating custom graphics with a real wow factor requires a suite of essential tools that can be a real difference maker for a fast and easy creation of visual content without any design experience.
Creating custom graphics with a real wow factor requires a suite of essential tools that can be a real difference maker for a fast and easy creation of visual content without any design experience.
Creating custom graphics with a real wow factor requires a suite of essential tools that can be a real difference maker for a fast and easy creation of visual content without any design experience.</p>
<p class="no-mar">Creating custom graphics with a real wow factor requires a suite of essential tools that can be a real difference maker for a fast and easy creation of visual content without any design experience.
Creating custom graphics with a real wow factor requires a suite of essential tools that can be a real difference maker for a fast and easy creation of visual content without any design experience.
Creating custom graphics with a real wow factor requires a suite of essential tools that can be a real difference maker for a fast and easy creation of visual content without any design experience.
Creating custom graphics with a real wow factor requires a suite of essential tools that can be a real difference maker for a fast and easy creation of visual content without any design experience.
Creating custom graphics with a real wow factor requires a suite of essential tools that can be a real difference maker for a fast and easy creation of visual content without any design experience.
Creating custom graphics with a real wow factor requires a suite of essential tools that can be a real difference maker for a fast and easy creation of visual content without any design experience.</p>
</div>
<div id="service" class="wrapper_article">
<h2>Service Section</h2>
<p>Creating custom graphics with a real wow factor requires a suite of essential tools that can be a real difference maker for a fast and easy creation of visual content without any design experience.
Creating custom graphics with a real wow factor requires a suite of essential tools that can be a real difference maker for a fast and easy creation of visual content without any design experience.
Creating custom graphics with a real wow factor requires a suite of essential tools that can be a real difference maker for a fast and easy creation of visual content without any design experience.
Creating custom graphics with a real wow factor requires a suite of essential tools that can be a real difference maker for a fast and easy creation of visual content without any design experience.
Creating custom graphics with a real wow factor requires a suite of essential tools that can be a real difference maker for a fast and easy creation of visual content without any design experience.
Creating custom graphics with a real wow factor requires a suite of essential tools that can be a real difference maker for a fast and easy creation of visual content without any design experience.</p>
<p class="no-mar">Creating custom graphics with a real wow factor requires a suite of essential tools that can be a real difference maker for a fast and easy creation of visual content without any design experience.
Creating custom graphics with a real wow factor requires a suite of essential tools that can be a real difference maker for a fast and easy creation of visual content without any design experience.
Creating custom graphics with a real wow factor requires a suite of essential tools that can be a real difference maker for a fast and easy creation of visual content without any design experience.
Creating custom graphics with a real wow factor requires a suite of essential tools that can be a real difference maker for a fast and easy creation of visual content without any design experience.
Creating custom graphics with a real wow factor requires a suite of essential tools that can be a real difference maker for a fast and easy creation of visual content without any design experience.
Creating custom graphics with a real wow factor requires a suite of essential tools that can be a real difference maker for a fast and easy creation of visual content without any design experience.</p>
</div>
<div id="feature" class="wrapper_article">
<h2>Feature Section</h2>
<p>Creating custom graphics with a real wow factor requires a suite of essential tools that can be a real difference maker for a fast and easy creation of visual content without any design experience.
Creating custom graphics with a real wow factor requires a suite of essential tools that can be a real difference maker for a fast and easy creation of visual content without any design experience.
Creating custom graphics with a real wow factor requires a suite of essential tools that can be a real difference maker for a fast and easy creation of visual content without any design experience.
Creating custom graphics with a real wow factor requires a suite of essential tools that can be a real difference maker for a fast and easy creation of visual content without any design experience.
Creating custom graphics with a real wow factor requires a suite of essential tools that can be a real difference maker for a fast and easy creation of visual content without any design experience.
Creating custom graphics with a real wow factor requires a suite of essential tools that can be a real difference maker for a fast and easy creation of visual content without any design experience.</p>
<p>Creating custom graphics with a real wow factor requires a suite of essential tools that can be a real difference maker for a fast and easy creation of visual content without any design experience.
Creating custom graphics with a real wow factor requires a suite of essential tools that can be a real difference maker for a fast and easy creation of visual content without any design experience.
Creating custom graphics with a real wow factor requires a suite of essential tools that can be a real difference maker for a fast and easy creation of visual content without any design experience.
Creating custom graphics with a real wow factor requires a suite of essential tools that can be a real difference maker for a fast and easy creation of visual content without any design experience.
Creating custom graphics with a real wow factor requires a suite of essential tools that can be a real difference maker for a fast and easy creation of visual content without any design experience.
Creating custom graphics with a real wow factor requires a suite of essential tools that can be a real difference maker for a fast and easy creation of visual content without any design experience.</p>
<p class="no-mar">Creating custom graphics with a real wow factor requires a suite of essential tools that can be a real difference maker for a fast and easy creation of visual content without any design experience.
Creating custom graphics with a real wow factor requires a suite of essential tools that can be a real difference maker for a fast and easy creation of visual content without any design experience.
Creating custom graphics with a real wow factor requires a suite of essential tools that can be a real difference maker for a fast and easy creation of visual content without any design experience.
Creating custom graphics with a real wow factor requires a suite of essential tools that can be a real difference maker for a fast and easy creation of visual content without any design experience.
Creating custom graphics with a real wow factor requires a suite of essential tools that can be a real difference maker for a fast and easy creation of visual content without any design experience.
Creating custom graphics with a real wow factor requires a suite of essential tools that can be a real difference maker for a fast and easy creation of visual content without any design experience.</p>
</div>
<div id="contact" class="wrapper_article">
<h2>Contact Section</h2>
<p>Creating custom graphics with a real wow factor requires a suite of essential tools that can be a real difference maker for a fast and easy creation of visual content without any design experience.
Creating custom graphics with a real wow factor requires a suite of essential tools that can be a real difference maker for a fast and easy creation of visual content without any design experience.
Creating custom graphics with a real wow factor requires a suite of essential tools that can be a real difference maker for a fast and easy creation of visual content without any design experience.
</p>
</div>
</section>
</div>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"></script>