How can I put an href tag with link to a specific h1 tag in another page?
This is what I tried...
Move to page 2, section 1
Thanks
You can do something like this:-
<div id="anchor-name"> <h1>Heading goes here </h1></div>
and refer to it later with
Link text
First of all you have to give unique id to h1 tag on page2.
Move to page 2, section 1
Where #firstH1 is the id given to h1
Add page link to href with additional reference to the id of the specific div containing the heading(h1).
Click to move to next page heading
Here, page2.html is the link to next page and mydiv is the id of the div in which h1 is present.
<div id="mydiv>
<h1> My Heading </h1>
</div>
P.S: You can use the same approach to scroll to different parts on the same page.
Use target='_blank' if you want to open the next page in a new tab.
Related
I am a Template developer,
i created one script for footer credit link, so that the user cannot remove the footer link,
However, i am bit confuse why the anchor is not working ?
here is the script.
<script>
window.onload = function() {
var e = document.getElementById("credit");
e.setAttribute("href", "http://www.example.com/");
e.setAttribute("ref", "dofollow");
e.setAttribute("title", "Free Templates");
e.innerHTML = "Example"
}
</script>
As you see the above script, i included that in my template and also i add the credit div in footer area like this:
<div id="credit"></div>
Now when i open my template, It seems as plain texts.
Problem: Why the Example seems as plain texts it is not anchor. how to make it clickable so that it should go to example.com if click.
Fiddle: https://jsfiddle.net/copyblogger/dkt2jdxt/5/
Note: please share full coding with fiddle example.
Try this:
<a id="credit"></a>
You've been setting attributes that a div tag does not have, but an a tag does.
The href attribute is only supported on the following elements: <a>, <area>, <base>, <link>.
You could wrap the <div> in an <a> element and then the entire div would be clickable.
I have a piece of code like below
<div>
<ul>
<li>Test1</li>
-------
-------
-------
<li>Test46</li>
</div>
It displays the html page with 46 links. The issue is when i scroll down and select the 46th or the ones just above this the page is going back to the top again. why is it happening so and is there any way to prevent it ?
href is blank thats why its going at top. You can use this instead of keeping blank:
Test46
href="" contains the URL "" which is a relative URL that resolves to "the URL of the current page".
When you click on the link, the browser follows it and goes to the current page.
As is normal (absent of any specific directive otherwise), when it goes to a page, it starts at the top.
If you don't want to link to the page: Why are you using a link in the first place?
If you just want something to dangle JavaScript from, use a button instead.
<button type="button">Test46</button>
You can style it to remove the default background colour and border, and set the colour scheme to match that of a link if you want it to look like a link.
An empty string in the href attribute <a href=""> means in modern browsers to go to the current page. This will basically just reload the current page, and as such it will go to the top.
One way to prevent from going to the top is to use href="javascript:void(0)", as mentioned by #Manwal or you can simply remove the href attribute completely (note in that case it will not show up as a clickable hyper-link).
is it possible to jump to an other page and in the same action also to a page position (at the new website) by clicking only one link?
For example
index.html -> clicking "link1" -> news.html is shown and view position is anchor "article1".
index.html -> clicking "link2" -> news.html is shown and view position is anchor "article2".
Hope, someone can help me?
Yes, it is easy.
In index.html, add a #identifier after the href string like so
Article 1
Article 2
and in news.html, insert the <a> tag with name attribute just above the content that you want displayed in view
<a name="article1"></a>
<p>Some Article1 Content</p>
<a name="article2"></a>
<p>Some Article2 Content</p>
So, now, if someone clicks Article 1, it will show news.html with Article 1 in view.
Note that this only works if the page content is long enough to require y-axis scroll bars in the browser window.
You can just add the anchor to the link:
Link 1
Link 2
you can view it here:
http://www.daftblogger.com/managing-the-new-growth-challenge-for-frontier-market-investing-amlctf-regulations/
scroll down to the bottom of the post and view the second author box
example i have this:
bio
then in the body
<div id="tab1"></div>
<div id="tab2"></div>
I want to dynamically add the id both in the href and also in a div because more divs and hrefs will be added dynamically
http://pastebin.com/RKRwDpyx
Couldn't find a tutorial for this anywhere or just didn't use the right keywords.
I'm making a one-paged website, and I'd like the navigation bar buttons to scroll the page up/down to the right part.
Would this be possible in just HTML and CSS?
I'm not so experienced with JavaScript.
Similar to ''Scroll to the top'' but that I could decide to where it scrolls the page, like middle, top, bottom etc. .
Update: There is now a better way to use this, using the HTML id attribute:
Set the destination id: <h1 id="section1">Section 1</h1>
And create a link to that destination using the anchor tag: Go to section 1
The benefit of this new method is that the id attribute can be set on any HTML element. You don't have to wrap superfluous anchor tags around destination links anymore!
Original answer:
You can look at using the HTML anchor tag.
<a name="section1">Section 1</a>
alongside
Go to section 1
When the user clicks on "Go to section 1", they will be sent to the section of the page where the "Section 1" text is displayed.
using window.scrollTo you can scroll down your page like this
window.scrollTo(0,document.body.scrollHeight);