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
Related
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.
I have several anchors on my one-page-design-site. Those who are animated by JavaScript do not work in screen-reader lynx.
Clicking one of these links always target the first anchor on this page.
As Javascript does not influence (normally) a screen-reader's behavior - what can I do?
#Allan: Thanks for trying to help!
So here is some code: The link to the main navigation, only seen by screen-readers jumps directly to the link with the id "mainnavi":
<p class="sreenreader-only">
Direct to Main Nav
</p>
Home
The link "Home" is animated to scroll down to the section "home", coded like this:
<section id="home">...</section>
That's all it is.
Hope this is helpful.
Please provide some code so I can provide better help.
My guess is : Make sure your anchors have unique names
Menu Item 1
Menu Item 2
<a name="name1"></a>
Content 1 .....
<a name="name2"></a>
Content 1 .....
Not sure if this can be done but I'm trying to redirect a url to a certain div. To give you more details of what I want to achieve is I have 1 page with 2 tabs and different url, I replaced that page with just 1 page and instead of 2 tabs I have the content just under each other. I few 3rd party websites link to these tabs so instead of sending the new url to them I was wondering if I can use those url's in the divs and when the user goes to the urls it redirect straight to that div.
In html you can do this
Div 1
<div id="div1">Loremipsum........</div>
and i want to do this
Div 1
<div id="div1 & http://www.gogle.com/div1">Loremipsum........</div>
Can it be done? I cannot find any documentation or examples.
Thanks
Hmmm I dont see your problem...
When you go to a page like www.example.com/index.foo#something (note the #something in the end - stackoverflow is reformating when i want to write it bold beacuse of the #) you will actually to the jump where the id "something" is placed. Try it out:
https://jsfiddle.net/8btkp706/
Something
<div id="something">
Soooooooooooo down below....
</a>
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).
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);