CODEWITHSUNDEEP
javascripthtml
Severus Tux
Severus Tux

Reputation: 285

Navigating inside a webpage without appending #href (browser back button)

How to navigate to sections inside a webpage without remembering history? That is, suppose I use the following code. When I click on About, it takes me to the About section. But it also adds #about in the URL. The problem is, if I click 10 times alternating between Home and About to navigate inside the page, then when I click the browser back button I backtracks all my actions like a stack. I want it to completely come out of the webpage. How to achieve this?

<!DOCTYPE html>
<html>
<head>
    <title>testing</title>
</head>
<body>
    <ul class="nav">
        <li><a href="#home"> Home</a></li>
        <li><a href="#about"> About</a></li>
    </ul>
    <section id="home" style="margin-top: 100%">
        Home Sweet Home!
    </section>
    <section id="about" style="margin-top: 100%">
        About Me
    </section>
</body>
</html>

PS: If it is not possible with only html, using java Script is fine.

Upvotes: 0

Views: 182

Answers (2)

Son Nguyen
Son Nguyen

Reputation: 1482

You can do the job with pure HTML like this:

<body>
<ul class="nav">
    <li><a href="#home" onclick="event.preventDefault();document.getElementById('about').style.display='none';document.getElementById('home').style.display='block';history.pushState(null,null,'home')"> Home</a></li>
    <li><a href="#about" onclick="event.preventDefault();document.getElementById('home').style.display='none';document.getElementById('about').style.display='block';history.pushState(null,null,'about')"> About</a></li>
</ul>
<section id="home" style="">
    Home Sweet Home!
</section>
<section id="about" style="display: none;">
    About Me
</section>
</body>

It's just so you get the idea, but in practice, you should write more organized JavaScript and probably need help from a library like JQuery to build a useful website or app with navigation. Even in this example, there's a lot of room for improvement:

  • There's a lot of long and repetitive code crammed in it, a problem an external JavaScript script or app will solve.

  • Thanks to history.pushState, the button link and browser back/forth works as expected (look in the address bar to see the URL change without refreshing page), but as soon as you refresh page, you'll get an error. You need a web server to serve the right content for this to work, with help from the client too.

Update

Improved version with organized script and animation to demonstrate what you can do with in-file CSS and script.

<!DOCTYPE html>
<head>
   <title>testing</title>
   <style>
        section {
            position: absolute;
            left: -800px;
            top: 100px;
            transition: left .6s;
        }
        section.visible {
            left: 200px;
        }
    </style>
    <script>
        function navTo(page) {
            if (page === 'about') {
                document.getElementById('home').classList.remove('visible');
                document.getElementById('about').classList.add('visible');
                history.pushState(null, null, 'about');
            } else {
                document.getElementById('about').classList.remove('visible');
                document.getElementById('home').classList.add('visible');
                history.pushState(null, null, 'home');
            }
        }
    </script>
</head>

<body>
<ul class="nav">
    <li><a href="#home" onclick="event.preventDefault();navTo('home')">
        Home</a></li>
    <li><a href="#about" onclick="event.preventDefault();navTo('about')">
        About</a></li>
</ul>
<section id="home" class="visible">
    Home Sweet Home!
</section>
<section id="about">
    About Me
</section>

</body>
</html>

Upvotes: 1

iAmOren
iAmOren

Reputation: 2804

use:

element.scrollIntoView()

element=document.getElementById("element's id")

in html:

<a onclick="elementId.scrollIntoView()">element name</a>

note: any tag will do... the <a> will lose the underscore and color change - could be fixed with style. how about (flat, with style) buttons?

Upvotes: 1

Related Questions