How to Navigate to a Section of a Page

How to navigate to a section of a page

Use HTML's anchors:

Main Page:

<a href="sample.html#sushi">Sushi</a>
<a href="sample.html#bbq">BBQ</a>

Sample Page:

<div id='sushi'><a name='sushi'></a></div>
<div id='bbq'><a name='bbq'></a></div>

Getting a link to go to a specific section on another page

I believe the example you've posted is using HTML5, which allows you to jump to any DOM element with the matching ID attribute. To support older browsers, you'll need to change:

<div id="timeline" name="timeline" ...>

To the old format:

<a name="timeline" />

You'll then be able to navigate to /academics/page.html#timeline and jump right to that section.

Also, check out this similar question.

Navigation to specific section of the page from another page is not working

IMPORTANT

---

I understand what your problem is. Anchors are only used by page, not by the whole webpage. To do what you are doing, the link should not be page.com/#service, but page.com/page.html#service, so it finds the correct page to go to.

Doing it by page.com/#service only works for the page because page.com/ redirects to page.com/index.html, so really it means page.com/index.html#service.

---

Instead of using an anchor tag, you can create add an id to your header, like this:

<!-- In page to go to -->
<h1 id="services">Services</h1>

and then link it to the id:

<!-- In page with link -->
<a href="page.html#services">Services</a>

How to navigate to a section of a page without using id

If you can edit the second site's source and add in some JavaScript then Saeed gives a great answer.

If you can't edit the second site's source then there are two answers:

1. You can't

Elements on an external page are not accessible. Id tags may seem like they're accessible since you can have a public URL that scrolls to them, but that's a browser implementation. No other element can be accessed like this. Since non-id elements are not accessible you cannot tell the browser that you want to scroll to them. You can't even tell the browser that you want to scroll a fixed distance on an external page, there is simply no way to do it in either HTML or JavaScript.

2. You sort of can, but the URL will be different and anyway you shouldn't do this

Just to clarify if the heading didn't make it clear, this is unsafe coding and will be confusing/scary for your users. It also doesn't really do what you're asking but it kind of simulates it.

If you had to scroll to an element within your own page that didn't have an id, how would you do it? Well, obviously you'd write a JavaScript function that ran after the page loaded, and identified the element in question and scrolled the page to its location. So to scroll to a position on an external page we somehow need to run a function after that page has loaded. Fortunately, this is impossible to do directly onto the external page - imagine how easy it would be to steal login credentials if you could inject arbitrary code into any webpage just by manipulating the link!

However instead, we can get the contents of the external page, manipulate it to add in our function, and then display the edited page either under your own URL or under a data URL. Either way, the manipulated page can't be displayed under its original URL. You may need to update internal links to point back to the original site.

But first! Nowadays it's almost impossible to use JavaScript on one domain to scrape content from a different domain. This is because of the Same Origin Policy, a security feature implemented by pretty much all browsers, that forbids scripts accessing data from different domains. It's designed to combat phishing attacks (I mean, we are trying to clone someone else's site while adding in our own code...). Fortunately bypassing the same-origin policy is pretty trivial. You can write your own PHP function to do this if you want, or you might as well use any of a number of web apps that already do this. https://multiverso.me/AllOrigins/ is as good as any, and it's free so I'll use that in this example.

Looking at the source code of the page in question (http://www.naturals.in/ask-expert/) the place you want to scroll to is <h2>Expert Speak</h2>. We'll edit that to be <h2 id='expert-speak'>Expert Speak</h2> and then we'll add a function that runs once the page is loaded that scrolls to #expert-speak

The code (Jquery):

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
function redirect() {
    var url = 'http://www.naturals.in/ask-expert/';
    // the webpage you want to display
    var jsonUrl = 'http://allorigins.me/get?url=' + encodeURIComponent(url) + '&callback=?';
    // the url / php function that allows content to be scraped from different origins.

    $.getJSON( jsonUrl, function( data ) {
        var content = data.contents;
        // this is the scraped content

        content = content.replace("<script>","<script>window.addEventListener('load',function(){$('#expert-speak').get(0).scrollIntoView();},false);");
        // this adds in an event listener for when the page loads.
        // When it loads a function runs that scrolls #expert-speak into view
        content = content.replace("<h2>Expert Speak</h2>","<h2 id='expert-speak'>Expert Speak</h2>")
        // This adds the id #expert-speak to the relevant h2 tag

        document.open();
        document.write( content );
        // replace the content of the current page with your new content
        document.close();
    } );
    </script>
}

There are two ways you can run this script.

1. You put this function on one of your own pages. Run the function when you click the link, and boom shakalaka! the page content will update with the page at http://www.naturals.in/ask-expert/ and then scroll to the desired position! Great success. The updated page will still function pretty much as if it had actually redirected to a new URL, however, the URL will be your URL. (In this case, links should still point back to the original site). This may scare away quite a few visitors who are wary of phishing or unusual behaviour so it is absolutely not recommended. This method should function on any web browser.

Code:

<button onclick='redirect()'>Click me</button>

2. You encode the function as a data URL, as shown below. A data URL embeds content - images, HTML, scripts - within the page's URL. This has the advantage that the displayed page's URL is no longer under your URL, so anyone wary of phishing is less likely to associate it with your domain. Many people, if they see an unexpected domain in the address bar might be more concerned than if they see a jumble of code they don't understand. However, precisely because this is such a good method of phishing attacks, most modern browsers block top-level navigation via data URLs. See this post for more info. This method is also absolutely not recommended.

Data url:

<script>var dataurl = "data:text/html,<html><scri"+"pt src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></scri"+"pt><scri"+"pt>$.getJSON('http://allorigins.me/get?url='+encodeURIComponent('http://www.naturals.in/ask-expert/')+'&callback=?',function(data){document.open();document.write(data.contents.replace('<scri"+"pt>','<scri"+"pt>window.addEventListener(\'load\',function(){$(\'#expert-speak\').get(0).scrollIntoView();},false);').replace('<h2>Expert Speak</h2>','<h2 id=\'expert-speak\'>Expert Speak</h2>'));document.close();});</scri"+"pt></html>"</script>
<button onclick='window.location=dataurl'>Click me</button>

Summary?

Pretty much, you can't do it. If you aren't fussed by unsafe code injection and don't mind scaring your users away you can do something similar though.

---

Related Topics