How to Bookmark or Link to a Section of a Page Without an Anchor

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.

Linking to arbitrary content on a webpage without anchor tags

7 years later and it is 2020, there is a draft now by WICG for Text Fragments, and now you can link to text on a page as if you were searching for it by adding the following to the hash

#:~:text=<Text To Link to>

Working example on Chrome Version 81.0.4044.138:

Click on this link Should reload the page and highlight the link's text

Create a Link to the Top of a Web Page Without Using Anchors

According to the HTML5 spec the empty fragment # and the special fragment #top will link to the top of the page.

<a href="#">Go to top</a>

<a href="#top">Go to top</a>

There is no need to create a matching anchor if you use these special fragment names.

Is there a way to link to a specific paragraph on a page without anchors?

You can only link to named anchors or elements with ids. If the target page has neither you are out of luck.

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.

---

Related Topics