How to open from an specific part of a html document?

Question

I have these <a href> buttons in index html and I want to open different pages but when I press the link I need to open the specific part of the second document which is an <article>.

I'm trying to develop an index.html where I have buttons with articles (like a blog) and when I click in the button it opens the document where the article is written for example technology.html each button goes to the specific article that I have written in that section, not loading from top the document.

That's what the "#identifier" part of a URL is for. Give the `
` elements unique "id" values, then use that string after "#" in the links. — Pointy, Sep 22 '20 at 11:59
If they're in a blog, the `
` elements may already have id values. — Pointy, Sep 22 '20 at 12:00
Does this answer your question? [Scroll to a specific Element Using html](https://stackoverflow.com/questions/24739126/scroll-to-a-specific-element-using-html) — Heretic Monkey, Sep 22 '20 at 12:01
Your answer is already there check this [link](https://stackoverflow.com/questions/15481911/linking-to-a-specific-part-of-a-web-page) — Hitesh Jangid, Sep 22 '20 at 12:06
Do you want to load another HTML file inside `index.html` ? If so, then you're probably looking for [AJAX](https://developer.mozilla.org/en-US/docs/Web/Guide/AJAX/Getting_Started). — Juan Marco, Sep 22 '20 at 12:10
I have tried with and it loads the article but with no CSS format — Mauro Stancato, Sep 22 '20 at 12:16

score 4 · Answer 1 · answered Sep 22 '20 at 12:04

Set the id attribute on the element you’d like to link to, and include that ID at the end of your URL path, denoted by a #.

So, to link to <article id=“blog1”> on www.example.com, your anchor tag would be:

<a href=“http://www.example.com#blog1”>Link</a>

Amaan warsi · Answer 2 · 2020-09-22T12:32:04.740

What about this:-

If you want link's which redirect or target to current page element's then use targeting type URL's e.g. href="#element_to_target" and Here is a working example of your question.

article{ height: 500px; width: 100%; display: flex; align-items: center; justify-content: center; }
article p{ font-weigth: bold; }
#first{ background: red; color: #fff; }
#second{ background: blue; color: #fff; }
#third{ background: green; color: #fff; }
.fixed{ position: fixed; top: 3px; }
.fixed a{ background: #dcdcdc; padding: 10px; border: 1px solid #666; }

 <html style="scroll-behavior: smooth;">
  <div class="fixed">
    <a href="#first">First</a>
    <a href="#second">second</a>
    <a href="#third">third</a>
  </div>
  <article id="first"><p>Hi I'm first</p></article>
  <article id="second"><p>Hi I'm second</p></article>
  <article id="third">Hi I'm third</p></article>
</html>

If this is not working for you then add your URL before #_type_identifier e.g. href="http://yourdomain.or/path#element".

Hope this will helpful for you, thank you.

How to open from an specific part of a html document?

2 Answers2