I have created a One page website, with a scroll down navbar. Meaning if I click on one of the links, the webpage will scroll down to the section based on which link was clicked on. The problem is if I were to click on the last navbar link which is contact us, the webpage will scroll all the way to the bottom of the page which it is supposed to do, however it buffers/or stalls at one point(meaning it does not scroll smoothly). How do I fix this?
The scrolling stall happens near the services section of the webpage. This only happens if I land on the page the first time or if I refresh the page. If I were to click on contact us, then go back to the top of the page where the navbar is located, and do this again, I do not get a scroll stall.
Below is the html code-
<!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>
Aucun commentaire:
Enregistrer un commentaire