如何获得窗口精确滚动位置

时间：2018-03-08 10:47:41

标签： javascript jquery html css

我正在尝试激活每个部分的菜单（当滚动到达该元素位置时）。但是，我发现最后一部分（联系部分）未激活，而滚动到达结束。如何解决此问题以及是否有任何可能的方法来获得滚动的确切位置（这意味着滚动顶部和部分顶部是相等的值）。见JsFiddle

＆＃13;
＆＃13; 
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;
＆＃13;
＆＃13;

3 个答案:

答案 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);
});

Smooth scroll to div id jQuery

答案 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>

相关问题
最新问题