Navigate to a specific location on the webpage without modifying the current URL

Question

Navigate to a specific location on the webpage without modifying the current URL

When a page is loaded, I want it to automatically scroll to the #content section without changing the URL.

I attempted to achieve this using the following code:

window.location.hash = "content";
window.location.replace("#content", "");

However, the #content still appears in the URL.

Is there a more effective approach to accomplish this?

Update:

I also tested out the following code:

window.location.hash = "content";
window.location.replace(window.location.toString().replace("#content", ""));

Unfortunately, this created a loop in the browser.

javascript window anchor

Answer 1

Answer №1

One way to locate the exact vertical position of a specific anchor is by using its unique id and then smoothly scrolling to that particular position.

Answer 2

One way to locate the exact vertical position of a specific anchor is by using its unique id and then smoothly scrolling to that particular position.

Answer 3

Answer №2

Navigate to a specific section of the page without altering the URL

VIEW DEMO

function smoothlyScrollTo(sectionId) {
  var section = document.getElementById(sectionId);
  section.scrollIntoView({
    block: 'start',
    behavior: 'smooth'
  });
}
#userdiv {
  margin-top: 200px;
  width: 200px;
  height: 400px;
  border: 1px solid red;
}

a {
  color: #337ab7;
  cursor: pointer;
}

a:hover {
  text-decoration: underline;
}
<a onclick="smoothlyScrollTo('userdiv')">
  Scroll to userdiv
</a>

<div id="userdiv">
  Lorem ipsum dolor sit amet
</div>

Answer 4

Navigate to a specific section of the page without altering the URL

VIEW DEMO

function smoothlyScrollTo(sectionId) {
  var section = document.getElementById(sectionId);
  section.scrollIntoView({
    block: 'start',
    behavior: 'smooth'
  });
}
#userdiv {
  margin-top: 200px;
  width: 200px;
  height: 400px;
  border: 1px solid red;
}

a {
  color: #337ab7;
  cursor: pointer;
}

a:hover {
  text-decoration: underline;
}
<a onclick="smoothlyScrollTo('userdiv')">
  Scroll to userdiv
</a>

<div id="userdiv">
  Lorem ipsum dolor sit amet
</div>

Answer 5

Answer №3

Although this question is a decade old, I recently encountered a similar issue while working with Next.js and wanted a seamless way to scroll to a specific element without changing the URL. Utilizing Next.js and Typescript.

const Anchor: React.FC = () => {
    const smoothScrollTo = e => {
          e.preventDefault();
          const element = document.getElementById('search');
          element.scrollIntoView({
              block: 'start',
              behavior: 'smooth' // smooth scroll
          })
    };

 return (
   <div>
      <a
        href=""
        onClick={smoothScrollTo}>
        Let's go!
      </a>
      <div id = "search">Take me here!</div>
   </div>
  )
};

While using refs would likely be the preferred method here, this approach served its purpose perfectly for me! I'm sure there are other enhancements that can be implemented as well!

Answer 6

Although this question is a decade old, I recently encountered a similar issue while working with Next.js and wanted a seamless way to scroll to a specific element without changing the URL. Utilizing Next.js and Typescript.

const Anchor: React.FC = () => {
    const smoothScrollTo = e => {
          e.preventDefault();
          const element = document.getElementById('search');
          element.scrollIntoView({
              block: 'start',
              behavior: 'smooth' // smooth scroll
          })
    };

 return (
   <div>
      <a
        href=""
        onClick={smoothScrollTo}>
        Let's go!
      </a>
      <div id = "search">Take me here!</div>
   </div>
  )
};

While using refs would likely be the preferred method here, this approach served its purpose perfectly for me! I'm sure there are other enhancements that can be implemented as well!

Answer 7

Answer №4

Here's a solution with a beautiful animation:

<a href="#link">Click here to smoothly scroll</a>

<div id="link" style="margin-top: 1000px; height: 300px; background-color: blue; margin-bottom: 1000px">
    Simply click and scroll to this section without changing the URL!
</div>


<script>
    $('a').on('click', function(e) {
        // prevent the default anchor click behavior
        e.preventDefault();

        // store the hash
        var hash = this.hash;

        if ($(hash).length) {
            $('html, body').animate({
                scrollTop: $(hash).offset().top
            }, 300, function() {
                // You can add some fun actions here if you'd like!
            });
        }
    });
</script>

Check out the live demonstration on JSFiddle

Answer 8

Here's a solution with a beautiful animation:

<a href="#link">Click here to smoothly scroll</a>

<div id="link" style="margin-top: 1000px; height: 300px; background-color: blue; margin-bottom: 1000px">
    Simply click and scroll to this section without changing the URL!
</div>


<script>
    $('a').on('click', function(e) {
        // prevent the default anchor click behavior
        e.preventDefault();

        // store the hash
        var hash = this.hash;

        if ($(hash).length) {
            $('html, body').animate({
                scrollTop: $(hash).offset().top
            }, 300, function() {
                // You can add some fun actions here if you'd like!
            });
        }
    });
</script>

Check out the live demonstration on JSFiddle

Navigate to a specific location on the webpage without modifying the current URL

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

React Redux Connect MapState not refreshing when filtering an item from a list

Troubleshooting Problem: Incompatibility with Angular 1 and Angular 2 Hybrid Application causing Display Issue with Components

Combining and mapping arrays in Javascript to form a single object

Encountering a npm error E404 when trying to install unicons package for React development

Obtaining an identification using JQuery for content that is constantly changing

Make sure that the function displays the output once it has been received using the jQuery.get method

Create a web design where two HTML elements with full width are positioned to overlap each other,

Encountering weathers.map is not a function error while using React.js with OpenWeatherMap integration

Issue with implementing bootbox and jQuery.validator for AJAX login form collaboration

Looking to implement v-model with a group of checkboxes in a Custom Component in Vue3?

Tips for styling tooltips in rc-slider

AngularJS validation for minimum character count prevents character overflow

Node js server for world's warm greetings

Incorporating dynamic form elements using Vue.js within a targeted div

Clicking on Rows in DataTables: Enhancing

The size of jVectorMap is displayed too diminutive

Using jQuery to target a specific item from a retrieved list of elements

The Xero Node OAuth Authorize Callback URL is malfunctioning after granting access

Guide to sending a specialized SPL token using the libraries '@solana/web3.js' and '@solana/sol-wallet-adapter'

After the update to the page, the DOM retains the previous element