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);
Related
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 .....
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
I've been trying every single tutorial I found online and none seems to work for me.
I've got these buttons:
<a href='faq.php'><div class='button'>
<div class='button_top'>
</div>
<div class='button_bot'>
FAQ
</div></a>
http://jsfiddle.net/6G8bk/
and I'd like that the top of the button would stay highlighted if the page url is same as href of the button.
Ty for any answers in advance!
Here's the fixed jsfiddle with jquery I tried but still won't work: http://jsfiddle.net/6G8bk/4/
A few things:
In your jQuery, you're trying to select all <a> elements that have a parent class of button, and according to your HTML you do not have (the button class is a child of the <a> element).
The page's URL won't work in JSFiddle because it will get the JSFiddle link, which will be different from the one on your website.
Since you want button_top to be visible on hover, you'll need to use JavaScript. As fas as I know, you can't manipulate another element on hover with pure CSS.
Here is a working Fiddle of what I think you want. I've left comments in the code that might help you.
http://jsfiddle.net/6G8bk/6/
You can retrieve the current url page by using $_SERVER["SCRIPT_NAME"] and comparing it to each element of the menu.
If it match, you put another class in the menu element with CSS rules to have the layout you want.
I would like to make a link that finds some text and scrolls to that point. I can't add span or div tags.
I have found this and ideally I would like to turn it into a link and add animation. Thanks
$(window).scrollTop($("*:contains('Are you a Lib Dem or Tory'):last").offset().top);
Original stackoverflow question
It seems to me that this is the sort of thing a standard <a> tag does already without JavaScript, if you can add an <a name="jumppoint"> tag around or at the start of that text and then another <a href="#jumppoint"> tag where you want your visible link. You could insert such an <a> dynamically with jQuery.
But if you're determined to use that code you can add a link as follows:
Your link text here
Of course that's kind of ugly so you'd probably be better off creating a function:
Your link text here
function findLink() {
$(window).scrollTop($("*:contains('Are you a Lib Dem or Tory'):last").offset().top);
}
If you want some animation add it in the findLink() function.