I have a React based website that includes this list of links on the top of every page:
<ul>
<li><a href="/">HOME</a></li>
<li><a href="/about-us">ABOUT US</a></li>
<li><a href="/#contactSection">CONTACT US</a></li>
</ul>
At the bottom of the home page I have this piece of HTML:
<section id="contactSection" className="contactSection ptb_100">
<h2>Contact Us</h2>
...HTML FORM...
</section>
When I click the Contact Us link from the top of the home page, Chrome will scroll to the correct HTML identified by the contactSection, however, Safari will scroll to the top of the page. When I click the Contact Us link from another page on the site, or if I type the #contactSection into the address bar and hit enter, Safari correctly scrolls.
I have looked at threads suggesting to add the / to the href, but that didn't seem to work. Any suggestions?
UPDATE The cause of the issue was a sticky header on the top of the page that caused Safari to keep the page at the top. Removing the sticky header, solved the issue, although not sure why.
You shouldn't add "/" for same page id links
html {
scroll-behavior: smooth;
}
#myDiv {
/* To enable scroll */
margin-top: 3000px;
/* Extras (Not required) */
padding-bottom: 2em;
background: red;
}<a href="#myDiv">
Click mo to go to myDiv!
</a>
<div id="myDiv">This is myDiv</div>Try this. In HTML
<li><span onclick="scrollToElement('#contactSection')">CONTACT US</span></li>
and in JS
function scrollToElement(id) {
const el = document.querySelector(id);
if (el) {
el.scrollIntoView();
}
}