我创建了一个带有向下导航栏的“一页”网站。这意味着，如果我单击其中一个链接，则该网页将向下滚动到基于单击该链接的部分。问题是如果我要单击与我们联系的最后一个导航栏链接，则该网页将一直滚动到它应该执行的页面底部，但是会在一个点处缓冲/或停顿（这意味着它不能平滑滚动）。我该如何解决？
我正在使用最新版本的Google chrome。
滚动停顿发生在网页的服务部分附近。仅当我第一次进入页面或刷新页面时，才会发生这种情况。如果要单击“与我们联系”，请返回导航栏所在页面的顶部，然后再次执行此操作，我不会出现滚动停顿的情况。
下面是html代码-
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 traditional//EN">
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=`device-width`, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 950);
return false;
}
}
});
});
</script>
<link href='https://fonts.googleapis.com/css?family=Cabin:700' rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic" rel="stylesheet" type="text/css">
</head>
<body>
<div class="bg">
<div class="topnav">
<a class="active" href="#Home">Home</a>
<a href="#Who">Who</a>
<a href="#Services">Services</a>
<a href="#Portfolio">Portfolio</a>
<a href="#Contact">Contact</a>
</div>
</div>
<div class="Who">
<h1 id="Who">Who are we ?</h1>
<p class="whodesc">Cabin is a website theme I created to demonstrate my skills as a front-end web developer. This website uses stock photos free of property and commercial rights.
</p>
<p class="whodesc">Cabin is a single page website that uses a scrollspy to navigate to different sections of the website.
</p>
<p class="whodesc">
Cabin is seperated into different sections, the first being home page with Navbar. Following straight after is the Who are we section which details what this website is about. After that we have a portfolio section where I have created an image gallery
with modal popup. When the user clicks on an image, a model is shown with both an image and brief description of the property.
</p>
<p class="whodesc">
Following after the portfolio section, the user is now brought over to see our services. Here we describe to the viewer/user what we do etc....
</p>
<p class="whodesc">
After scrolling some more, the user is then brought to our contact us page, which has a contact form. This contact form is split into a two columns, the first housing the google maps api, the second showing contact us form.
</p>
<p class="whodesc">Lastly we have the footer...</p>
<div class="Services">
<h1 id="Services">Services</h1>
<div class="leftcol">
<h2>Design/Build</h2>
<span>Design–build (or design/build, and abbreviated D–B or D/B accordingly) is a project delivery system used in the construction industry. It is a method to deliver a project in which the design and construction services are contracted by a single entity known as the design–builder or design–build contractor.
</p>
</div>
<div>
<img src="houseOne.jpeg" class="img" alt="" >
</div><div class="rightcol">
<h2>Pre-construction Design and Estimating</h2>
<span>Design–build (or design/build, and abbreviated D–B or D/B accordingly) is a project delivery system used in the construction industry. It is a method to deliver a project in which the design and construction services are contracted by a single entity known as the design–builder or design–build contractor.
</p>
</div>
<div>
<img src="design.jpg" class="img" alt="" ></div><div class="leftcol">
<h2>Construction Services</h2>
<span>Design–build (or design/build, and abbreviated D–B or D/B accordingly) is a project delivery system used in the construction industry. It is a method to deliver a project in which the design and construction services are contracted by a single entity known as the design–builder or design–build contractor.
</p>
</div>
<div><img src="construction.jpeg" class="img" alt="" ></div>
</div>
<div class="Portfolio">
<h1 id="Portfolio">Portfolio</h1>
<div class="row">
<div class="column">
<div class="content">
<img src="picOne.jpg" class="thumbnail" alt="" style="width:100%">
<h3>26 Elgin Street</h3>
<p>Click picture for more information</p>
</div>
</div>
<div class="column">
<div class="content">
<img src="picTwo.jpg" class="thumbnail" alt="" style="width:100%">
<h3>26 Elgin Street</h3>
<p>Click picture for more information</p>
</div>
</div>
<div class="column">
<div class="content">
<img src="picThree.jpg" class="thumbnail" alt="" style="width:100%">
<h3>My Work</h3>
<p>Lorem ipsum..</p>
</div>
</div>
<div class="column">
<div class="content">
<img src="picFour.jpg" class="thumbnail" alt="" style="width:100%">
<h3>My Work</h3>
<p>Lorem ipsum..</p>
</div>
</div>
</div>
<div class="row">
<div class="column">
<div class="content">
<img src="picOne.jpg" class="thumbnail" alt="" style="width:100%">
<h3>My Work</h3>
<p>Lorem ipsum..</p>
</div>
</div>
<div class="column">
<div class="content">
<img src="picTwo.jpg" class="thumbnail" alt="" style="width:100%">
<h3>My Work</h3>
<p>Lorem ipsum..</p>
</div>
</div>
<div class="column">
<div class="content">
<img src="picThree.jpg" class="thumbnail" alt="" style="width:100%">
<h3>My Work</h3>
<p>Lorem ipsum..</p>
</div>
</div>
<div class="column">
<div class="content">
<img src="picFour.jpg" class="thumbnail" alt="" style="width:100%">
<h3>My Work</h3>
<p>Lorem ipsum..</p>
</div>
</div>
</div>
</div>
<div class="Contactus">
<h1 id="Contact">Contact Us</h1>
<div class="con">
<div style="text-align:Center">
<h3>Contact Form</h3>
<div style="text-align:Center">
<div style="text-align:left">
<div class="rws">
<div class="cols">
<div id="map" style="width:100%;height:500px"></div>
</div>
<div class="cols">
<form action="/action_page.php">
<label class="fname" for="fname">First Name</label>
<input type="text" id="fname" name="firstname" placeholder="Your name..">
<label for="lname">Last Name</label>
<input type="text" id="lname" name="lastname" placeholder="Your last name..">
<label class="email" for="email">Email</label>
<input type="text" id="email" name="email" placeholder="Your email....">
<label for="subject">Subject</label>
<textarea id="subject" name="subject" placeholder="Write something.." style="height:170px"></textarea>
<input type="submit" value="Submit">
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<p id="ft">Website created by Andrew B <br> Date created: 03/04/2016</p>
</div>
</div>
</body>
<script>
function myMap() {
var myCenter = new google.maps.LatLng(25.7616798, -80.1917902);
var mapCanvas = document.getElementById("map");
var mapOptions = {
center: myCenter,
zoom: 12
};
var map = new google.maps.Map(mapCanvas, mapOptions);
var marker = new google.maps.Marker({
position: myCenter
});
marker.setMap(map);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDlu8CXtmhjEntaf3I_IS0dMJQDRFvpw6U&callback=myMap"></script>
</html>