From c0ee88791542ddd33368c13ac8fcff520c01b463 Mon Sep 17 00:00:00 2001
From: Lee-1203 <342694918@qq.com>
Date: Thu, 31 Mar 2022 14:01:07 +0800
Subject: [PATCH] =?UTF-8?q?=E5=89=8D=E7=AB=AF=E6=A0=B7=E5=BC=8F=E5=AE=8C?=
 =?UTF-8?q?=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 about.html        | 47 ++++++++++++++++++++++++++++++++++++-----------
 js/javascript.js  | 21 +++++++++++++++++++++
 product.html      | 28 ++++++++++++++++++++++++----
 service-yfw.html  |  2 +-
 service-ywfw.html |  2 +-
 service-zxfw.html |  2 +-
 6 files changed, 84 insertions(+), 18 deletions(-)

diff --git a/about.html b/about.html
index dd22a33..c29f4f3 100644
--- a/about.html
+++ b/about.html
@@ -66,22 +66,22 @@
 			</div>
 		</div>
 		<!-- 主体内容 -->
-		<div class="pull-current-bg wow fadeInUp" data-wow-duration=".8s" data-wow-delay="0">
+		<div class="pull-current-bg w100">
 			<div class="pull-current w1280">
 				<div class="point">
 					<img src="images/home.png" alt="当前位置">
 					<p>当前位置：<a href="/">首页</a>-关于我们</p>
 				</div>
-				<div class="nav-item">                                        
-					<a href="" class="active">公司简介</a>
-					<a href="">大事件</a>
-					<a href="">加入我们</a>
-					<a href="">联系我们</a>
+				<div class="nav-item about-nav">                                        
+					<a href="javascript:void(0);" rel="nofollow" class="about-btn active">公司简介</a>
+					<a href="javascript:void(0);" rel="nofollow" class="memorabilia-btn">大事件</a>
+					<a href="javascript:void(0);" rel="nofollow" class="join-btn">加入我们</a>
+					<a href="javascript:void(0);" rel="nofollow" class="contact-btn">联系我们</a>
 				</div>
 			</div>
 		</div>
 		<!-- 公司介绍 -->
-		<div class="about-bg w100 wow fadeInUp" data-wow-duration=".8s" data-wow-delay="0">
+		<div class="about-bg w100 wow fadeInUp" data-wow-duration=".8s" data-wow-delay="0" id="about">
 			<div class="about w1280 wow fadeInUp" data-wow-duration=".8s" data-wow-delay="0">
 				<div class="about-txt wow fadeInLeft" data-wow-duration=".8s" data-wow-delay="0">
 					<strong>公司介绍</strong>
@@ -95,9 +95,9 @@
 		</div>
 		
 		<!-- 大事件 -->
-		<div class="memorabilia-bg w100 wow fadeInUp" data-wow-duration=".8s" data-wow-delay="0">
+		<div class="memorabilia-bg w100 wow fadeInUp" data-wow-duration=".8s" data-wow-delay="0" id="memorabilia">
 			<div class="index-title pull-title w100 wow fadeInUp" data-wow-duration=".8s" data-wow-delay="0">
-				<h2>产品中心</h2>
+				<h2>公司大事件</h2>
 				<span>科技创新<ins></ins>引领数据</span>
 			</div>
 			<div class="memorabilia w1280 wow fadeInUp" data-wow-duration=".8s" data-wow-delay="0">
@@ -231,7 +231,7 @@
 		</div>
 		
 		<!-- 加入我们 -->
-		<div class="join-bg w100 wow fadeInUp" data-wow-duration=".8s" data-wow-delay="0">
+		<div class="join-bg w100 wow fadeInUp" data-wow-duration=".8s" data-wow-delay="0" id="join">
 			<div class="join-list wow fadeInLeft" data-wow-duration=".8s" data-wow-delay="0">
 				<!-- 职位列表 -->
 				<div class="join-thumbnail-bg">
@@ -471,7 +471,7 @@
 			</div>
 		</div>
 		<!-- 联系我们 -->
-		<div class="contact-bg w100 wow fadeInUp" data-wow-duration=".8s" data-wow-delay="0">
+		<div class="contact-bg w100 wow fadeInUp" data-wow-duration=".8s" data-wow-delay="0" id="contact">
 			<div class="contact w1280 wow fadeInUp" data-wow-duration=".8s" data-wow-delay="0">
 				<ul class="contact-list">
 					<li class="wow fadeInUp" data-wow-duration=".8s" data-wow-delay="0">
@@ -582,4 +582,29 @@
 			</div>
 		</div>
 	</body>
+	<script type="text/javascript">
+		let aboutTop = $(".about-bg").offset().top-85;
+		let memorabiliaTop = $(".memorabilia-bg").offset().top-85;
+		let joinTop = $(".join-bg").offset().top-85;
+		let contactTop = $(".contact-bg").offset().top-85;
+		$(window).bind("scroll",function(){
+			let topScroll=$(this).scrollTop();//当前窗口的滚动距离
+			if(topScroll > aboutTop){
+				$(".about-nav>a").removeClass("active");
+				$(".about-btn").addClass("active");
+			}
+			if(topScroll > aboutTop && topScroll > memorabiliaTop){
+				$(".about-nav>a").removeClass("active");
+				$(".memorabilia-btn").addClass("active");
+			}
+			if(topScroll > aboutTop && topScroll > memorabiliaTop && topScroll > joinTop){
+				$(".about-nav>a").removeClass("active");
+				$(".join-btn").addClass("active");
+			}
+			if(topScroll > aboutTop && topScroll > memorabiliaTop && topScroll > joinTop && topScroll > contactTop){
+				$(".about-nav>a").removeClass("active");
+				$(".contact-btn").addClass("active");
+			}
+		});
+	</script>
 </html>
\ No newline at end of file
diff --git a/js/javascript.js b/js/javascript.js
index d0311db..6205860 100644
--- a/js/javascript.js
+++ b/js/javascript.js
@@ -116,6 +116,27 @@ jQuery(function($){
 		$(this).addClass("active");
 	});
 	
+	// 关于我们锚点
+	$('.about-btn').click(function(){
+		$('html,body').animate({scrollTop:$('.about-bg').offset().top - 85}, 1000);
+		$('.about-nav>a').removeClass("active");
+		$(this).addClass("active");
+	});
+	$('.memorabilia-btn').click(function(){
+		$('html,body').animate({scrollTop:$('.memorabilia-bg').offset().top - 85}, 1000);
+		$('.about-nav>a').removeClass("active");
+		$(this).addClass("active");
+	});
+	$('.join-btn').click(function(){
+		$('html,body').animate({scrollTop:$('.join-bg').offset().top - 85}, 1000);
+		$('.about-nav>a').removeClass("active");
+		$(this).addClass("active");
+	});
+	$('.contact-btn').click(function(){
+		$('html,body').animate({scrollTop:$('.contact-bg').offset().top - 85}, 1000);
+		$('.about-nav>a').removeClass("active");
+		$(this).addClass("active");
+	});
 	
 	// 大事件滚动
 	var memorabiliaThumbnailSwiper = new Swiper('.memorabilia-thumbnail-swiper',{
diff --git a/product.html b/product.html
index eb2b783..a134302 100644
--- a/product.html
+++ b/product.html
@@ -66,7 +66,7 @@
 			</div>
 		</div>
 		<!-- 主体内容 -->
-		<div class="pull-current-bg wow fadeInUp" data-wow-duration=".8s" data-wow-delay="0">
+		<div class="pull-current-bg w100">
 			<div class="pull-current w1280">
 				<div class="point">
 					<img src="images/home.png" alt="当前位置">
@@ -94,9 +94,9 @@
 			</div>
 			<!-- 左侧边栏 -->
 			<div class="side-left">
-				<a href="#introduce" class="introduce-btn active">产品简介</a>
-				<a href="#scene" class="scene-btn">应用场景</a>
-				<a href="#case" class="case-btn">案例展示</a>
+				<a href="javascript:void(0);" rel="nofollow" class="introduce-btn active">产品简介</a>
+				<a href="javascript:void(0);" rel="nofollow" class="scene-btn">应用场景</a>
+				<a href="javascript:void(0);" rel="nofollow" class="case-btn">案例展示</a>
 			</div>
 		</div>
 		
@@ -462,4 +462,24 @@
 			</div>
 		</div>
 	</body>
+	<script type="text/javascript">
+		let introduceTop = $(".product-introduce-bg").offset().top-85;
+		let sceneTop = $(".product-scene-bg").offset().top-85;
+		let caseTop = $(".product-case-bg").offset().top-85;
+		$(window).bind("scroll",function(){
+			let topScroll=$(this).scrollTop();//当前窗口的滚动距离
+			if(topScroll > introduceTop){
+				$(".side-left>a").removeClass("active");
+				$(".introduce-btn").addClass("active");
+			}
+			if(topScroll > introduceTop && topScroll > sceneTop){
+				$(".side-left>a").removeClass("active");
+				$(".scene-btn").addClass("active");
+			}
+			if(topScroll > introduceTop && topScroll > sceneTop && topScroll > caseTop){
+				$(".side-left>a").removeClass("active");
+				$(".case-btn").addClass("active");
+			}
+		});
+	</script>
 </html>
\ No newline at end of file
diff --git a/service-yfw.html b/service-yfw.html
index aea7f45..800906a 100644
--- a/service-yfw.html
+++ b/service-yfw.html
@@ -66,7 +66,7 @@
 			</div>
 		</div>
 		<!-- 主体内容 -->
-		<div class="pull-current-bg wow fadeInUp" data-wow-duration=".8s" data-wow-delay="0">
+		<div class="pull-current-bg w100">
 			<div class="pull-current w1280">
 				<div class="point">
 					<img src="images/home.png" alt="当前位置">
diff --git a/service-ywfw.html b/service-ywfw.html
index 7b3bfa7..e3e57d0 100644
--- a/service-ywfw.html
+++ b/service-ywfw.html
@@ -66,7 +66,7 @@
 			</div>
 		</div>
 		<!-- 主体内容 -->
-		<div class="pull-current-bg wow fadeInUp" data-wow-duration=".8s" data-wow-delay="0">
+		<div class="pull-current-bg w100">
 			<div class="pull-current w1280">
 				<div class="point">
 					<img src="images/home.png" alt="当前位置">
diff --git a/service-zxfw.html b/service-zxfw.html
index 7c27562..06c1fd6 100644
--- a/service-zxfw.html
+++ b/service-zxfw.html
@@ -66,7 +66,7 @@
 			</div>
 		</div>
 		<!-- 主体内容 -->
-		<div class="pull-current-bg wow fadeInUp" data-wow-duration=".8s" data-wow-delay="0">
+		<div class="pull-current-bg w100">
 			<div class="pull-current w1280">
 				<div class="point">
 					<img src="images/home.png" alt="当前位置">