Is there a way to make it so the page doesn't shoot to the top of the site when clicking different links in the navigation bar?
e. So say I'm browsing my site and I'm scrolled down a little bit. Then I click on a link that navigates to a different page on my site. It automatically scrolls to the top. Is there a way to make it not do that.
instead of simply linking to a page, you could link to an anchor on that page using
link text
if that anchor is placed properly on the target page, you will not experience the jump back to top every time you link to another page. hope this helps
If this is the problem I'm picturing:
Change your links to point to <a href="#"> or <href="javascript:void(0);">
If you're going to different pages, you can use a link like:
My Link
Down in the page:
<div id="Section5">
Stuff!
</div>
This is the way that the web works. But still you can do a few work a rounds but each one will take a little work.
First option:
When you click on any link on the page, get the margin of the link from the top, then add it as a parameter to this link, and only then do the navigation. (the format of the line will be like page.html#margin-from-top).
Then in the new loaded page, you can look for this value and do the scroll. (I prefer the scrolling with a little duration).
Second option:
Another idea is to stay always on the same page and only change the content of it. you can do that with a little effects too.
It seems, too, like you might want to use a mooTools ScrollTo affect or possibly even invoke an AJAX method like SWFAddress.
Depending on exactly what you're trying to do, you may be able to accomplish it without using any fancy javascript, but it will depend on the inclusion of labels/etc. on your target page (as has been mentioned before).
Related
Hi I am doing an assignment that recquires me to only use html and css only no javascript. Usually, with javascript this is hella easy to do but html and css only is a bit annoying. In my first page I have a link to my second but when I press the link from the first page to go onto the second page. The animation I made does not work at all and the secondary text only shows up.
I will provide photos and code to show what I mean. I dont understand what I am doing incorrectly to cause this but it is annoying.
firstpage
second page
from the first page going onto the second via clicking 'start' the second text only shows up but I need the whole thing to show up. Heres the animation part I want to show up as well. animation_part
second page html:
html
second page css
css-part1
css-part2
I am not sure if this will further show my predicament but heres the code for the first html and css pages:
For some reason it is not allowing me to post the code here so I have done my best to showcase to go around the error
GITHUB: https://github.com/TheGraeDev/ADV201
It might be possible that your required character went to the back of main background. Try changes in css to bring your panda to front. Hope it helps!
Okay Incase anyone else comes across the same issue. Change position to relative and instead of using percentage value for Top in css using px. it fixed the problem
I know that one type of link you can have is to a place within the page, using <a href="#id_here">.
I recently came across a carrd website, where clicking any of the links appears to take you to a new page, but I believe it's actually linking to an id (after clicking a link, you can see it's /#id rather than /someaddress). But it appears like a separate page, because you can't just scroll back up like usual when you use a link to an id.
I'm wondering how this works; I haven't been able to find anything on Google.
(edit: grammar)
Go to the site, click on the Who can use item in the menu on the 'front page' and have a look at the code through your browser's dev tools (not the source, the elements).
You'll see there are several sections looking like this sort of thing:
<section id="sources-section" class="inactive" style="display: none;">
but the one you clicked looks like this:
<section id="who-section" class="active" style="">
and in that section you'll see the text you can see on the screen.
Basically what they are doing is listening for clicks, and when they get one, use Javascript to set all sections to inactive class and display none style (I don't know why they need both) and set the one clicked to active class and remove the display none.
If you use your dev tools to unset the display none/inactive in another section you'll see that section's text displayed.
They're listening for the navigation to the bookmark in JS. From there, they dynamically set the display value on the other section tags on the page. In other words, this is done with JS and isn't a normal function of the bookmarks feature. If you want to do this, you'd need to make a JS script that hides the rest of the page when you jump to a bookmark.
I have a site where a few of the anchor links are not landing on the right spots of the second page while some are. I've quadruple checked the names for accuracy, ran it through the validator, etc but with no luck.
On the page http://webnamix.com/clients/pmgideas/index.php there is a link "Working with PMG saves you money" that is supposed to go to the #benefit bits of the faq page but it drops me to the bottom of the page. Same goes with "consultants who offer 'moment in time' analysis or advice". However, the "Gil Price's background" link seems to be doing just fine.
Can I please get a second pair of eyes on why this is happening?
I don't see any of them working. Can you turn off the CSS and try again or create a separate node and see if the same code works?
the #benefit anchor works fine. The page lands to the bottom which is the most possible to scroll down.
If you want you can activate/open the "benefits" anchor by writing javascript code. This will increment the bottom size, so it can point exactly where you want to land.
I want there to be anchor links on a webpage where when I click on the link, it brings me to a certain part of the webpage.
However, when the user click the back page button, it is now bringing the user to the previous part of the page, instead of the previous page.
How should I implement the link so that it does bring the user to the previous page instead of the previous part of a page?
link
I wonder if you could do something like what is described in the top answer of this post. Put the following into the 'onclick' of your anchor, and it'll scroll to your div of choice, without changing the URL (and hence preserving back-button functionality).
document.getElementById('youridhere').scrollIntoView();
Don't forget to take out the "href=#somepart".
That is how the anchor tags work. Your best bet is to read here and use it to remove your anchor jumps from browser history.
https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history
i want to use page break in html that means the reader cannot scroll down further until he select a link for it.
<SPAN id=title><A name=BdToc_1 external=yes><h1 id="BookTitle" align="center"><font color="#B90000"><b>Choose Subject</b></font></h1>
</A>
</SPAN>
<p>
Contents....
</p>
I want a page break before and after this. Please help me
Forgive me for pointing out the obvious, but page breaks are used to separate distinct pages. Each HTML document is a distinct "page". "select[ing] a link" traditionally loads a new page. So.... why don't you just load the next page when they click on this link?
You can specify where page breaks occur using CSS properties page-break-after, page-break-before. Of course, this works only when printing the web page. As far as I know, these properties are correctly implemented in all major browsers including IE6+. Additionally, you can also state that page break should not occur inside an element using page-break-inside.
If you want paging per se, you need to have HTML for each page and interlink these pages. Or you can fetch contents of each page using AJAX dynamically, which of course involves scripting.
It's not quite possible in HTML. You could try makeing something in Javascript, but anyone can dissable javascript.
Why would you want something like this?
You can use onscroll in javascript to control the scrolling. The onscroll event can determine the current position and there is a function to scroll up if the user is too far down.
Then, when the user clicks the link, you set a flag (scrollok=1). The onscroll checks the flag and now permits scrolling.
If you want to defeat people who have deactivated javascript, just make the content invisible until they click using stylesheets: visibility=none.
Then, when they click the link, you enable scrolling via the flag, and make the content visible.
If you don't know how to do these things, just leave a comment and I can be more precise.