In my website I have a contact section on the home page. When you click the contact link in the navigation bar it scrolls down to the contact section. I have done this by using #contact which is the name of the div of the contact section.
My question is how do I link to this from different pages so when contact is clicked on another page it directs to the homepage and then scrolls down to the div section.
I have linked a codepen below to explain the situation better.
Anchor the page you want to go to.
<a href="/my/path/index.html#contact">link to contact</a>
To add a anchor hyperlink (section) to the page do the following within anotherpage.html
<a name="sectiontoscrollto"></a>
Then link or it from the other page like this
<a href="anotherpage.html#sectiontoscrollto">Another Page</a>
this is duplicated question , but i will work an example for you soon and paste on comment section for your code in codepen.io i will not use the same way on the duplicated post , as it may help others here is a link which answered your question .
jQuery scroll to ID from different page
click here to download your files which you upload in codepen.io with the scrolling from another page
here as well the code you should place on index.html
<link rel="stylesheet" type="text/css" href="style.css">
<!-- navigation bar -->
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<div class="nav">
<div class="nav-header">
<div class="nav-title">
</div>
</div>
<div class="nav-btn">
<label for="nav-check">
<span></span>
<span></span>
<span></span>
</label>
</div>
<input type="checkbox" id="nav-check">
<div class="nav-links">
<a href="index.html" onclick="myFunction()">Contact Us</a>
<a href="anotherpage.html" onclick="myFunction()">Another Page</a>
</div>
</div>
<!-- navigation bar ends -->
<script>
$( document ).ready(function() {
var scrolflag = localStorage.getItem("storageName")
if (scrolflag = "scrolltocontact") {
console.log( "ready!" );
var elmnt = document.getElementById("contactus");
elmnt.scrollIntoView();
localStorage.setItem("normal")
alert(scrolflag);
}
});
</script>
<div id="firstsection">
When you click "Contact Us" in the navigation bar it automaticially scrolls
down to the contact us section. I have done this by using #contactus as a
link
which is also the name of the div. However when I go to another page I would
still like this to work in the navigation bar. Please click Another Page to
continue.<br><br>
Added text to show scrolling.<br><br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in
</div>
<div style="height:5in;">
lorium lourm <br>
lorium lourm <br>
lorium lourm <br>
lorium lourm <br>
lorium lourm <br>
<div>
<div id="contactus">
<h1>Contact Us</h1>
<p>If you would like to contact us for any reason, drop us a message
below, add an email address if you would like a reply.</p>
<p> Name: <br> <input type="text" id="firstname"name=""></p>
<p> Email: <br> <input type="text" id="email" name=""></p>
<p> Message: <br><textarea id="message"rows="4" cols="50"></textarea>
</div>
and this code for Anotherpage.html :
<link rel="stylesheet" type="text/css" href="style.css">
<!-- navigation bar -->
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
<div class="nav">
<div class="nav-header">
<div class="nav-title">
</div>
</div>
<div class="nav-btn">
<label for="nav-check">
<span></span>
<span></span>
<span></span>
</label>
</div>
<input type="checkbox" id="nav-check">
<div class="nav-links">
<a href="index.html" onclick="myFunction()">Contact Us</a>
<a href="anotherpage.html" onclick="myFunction()">Another Page</a>
</div>
</div>
<script>
window.onload = function() {
}
</script>
<!-- navigation bar ends -->
<script>
function myFunction() {
var getInput = "scrolltocontact"
localStorage.setItem("storageName",getInput);
location.replace("index.html")
}
</script>
</script>
<div id="firstsection">
How do I make it so when I click contact us it puts me back on my home page
(index.html) and then scrolls down to contact us section. Thanks for your
help.
</div>
the style.css will remain the same ,
let me know if you need any further help , i have created a local variable to indicate the clicking of contact us and i am calling that variable from anotherpage.html to index.html and with if condition i am scrolling based on that set value . you will have to clear storage after scrolling or it will keep scrolling .. i left it this way so you can have an idea how to do it ... good luck & let me know if you need any further help .
