CODEWITHSUNDEEP
javascripthtml
Johann
Johann

Reputation: 29885

Navigate with anchor without changing browser url and without javascript

In my app, I have a navigation pane on the left with content in a pane on the right. When you click on an item in the navigation pane, it dynamically loads content into the content pane through the use of jQuery ajax. When content is loaded, I update the browser's url. For example:

www.mysite.com/content.html#section1
www.mysite.com/content.html#section2
www.mysite.com/content.html#section3

In the content I would like to have links to other areas within the same content, so that when you click on it, the content scrolls to it. If I use the typical anchor tags, the browser's url will get updated which is what I want to avoid. I can use a click handler and some Javascript to scroll to it. But I am wondering if there is a way to accomplish this without Javascript.

Upvotes: 0

Views: 171

Answers (2)

PKInd007
PKInd007

Reputation: 388

<!DOCTYPE html>
<html>
<head>
<style>
html {
  scroll-behavior: smooth;
}

#section1 {
  height: 600px;
  background-color: pink;
}

#section2 {
  height: 600px;
  background-color: yellow;
}
</style>
</head>
<body>

<h1>Smooth Scroll</h1>

<div class="main" id="section1">
  <h2>Section 1</h2>
  <p>Click on the link to see the "smooth" scrolling effect.</p>
  <a href="#section2">Click Me to Smooth Scroll to Section 2 Below</a>
  <p>Note: Remove the scroll-behavior property to remove smooth scrolling.</p>
</div>

<div class="main" id="section2">
  <h2>Section 2</h2>
  <a href="#section1">Click Me to Smooth Scroll to Section 1 Above</a>
</div>

</body>
</html>

PFB link that may be helpfull: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_smooth_scroll

Upvotes: 0

Tristan De Oliveira
Tristan De Oliveira

Reputation: 808

Can you accomplish this without Javascript ? The answer is No, you can't.

You need to use a custom click event.

Upvotes: 1

Related Questions