Make the web browser scroll to the top? - javascript

What is the JavaScript to scroll to the top when a button/link/etc. is clicked?

Top

If you had an anchor link at the top of the page, you could do it with anchors too.
<a name="top"></a>
top
It'll work in browser's with Javascript disabled, but changes the url. :( It also lets you jump to anywhere the name anchor is set.

actually, this works by itself, no need to define it.
top
This is a "magic" hashname value that does not need to be defined in browsers.
Just like this will "reload" the page.
reload

Related

HTML: A way to prevent showing href in bottom left Google Chrome

Is there a way to prevent this to show up at the bottom left of a Google Chrome browser when hovering a with a href?
http://puu.sh/4lQDA.jpg
This is one of those things designed to protect users, it cant be controlled by the page being viewed as it would defeat the purpose. A similar question on super user suggests that it is not possible.
I am not sure if it solves your purpose .. but you could use javascript to redirect you to new page instead of using href if you dont want user to see link on statusbar.
<p onclick="go2URL('http://puu.sh/4lQDA.jpg')">click here</p>
<script>
function go2URL(url)
{
var win=window.open(url, '_blank');
win.focus();
}
</script>
Obviously u can use onclick even on any other html container as well .. this is just an example.
I dont think there is any direct way to disable status bar functioning.

When loading, the page goes on the bottom of it

I have an issue with my website. My page loads normally in Firefox, but when I use either Chrome or Safari, it goes to the bottom of the page and I don't understand why. I tried putting the following snippet at the beginning of the page, but no luck.
<script>
$(document).ready(function() {
$(document).scrollTop(0);
});
</script>
Why does the page go to the bottom on loading?
When going to your site, I get redirected to http://www.ondinevermenot.fr/#start. That means the page will try to jump to the start element.
However, the start element is absolutely positioned. Therefore, when the page tries to jump down, the start element moves down with it. Therefore the page tries to jump down again. Then the start element moves down more. They keep going down until the bottom of the page, when there is no more room.
To fix it, don't redirect to #start when your page loads.
Because of the strangeness of jumping to something that's absolutely positioned, it's probably handled differently in different browsers.
Try to have your image and other contents put inside div and set the box attribute of the div to margin:auto. works well with HTML5.
i have an alturnative work around for you and incase you ever need to get to the top of the page - you can use this javascript as an alturnative:
((IJavaScriptExecutor)webapplication).ExecuteScript("window.scrollTo(0, document.body.scrollHeight 0)");
however the other option would be to set a start up property: for example document.start("body.height = 0") something along those lines may work.
preferably id use option one as a code to start the broswer at a set height may not work so well for every browser. hope this helps.
I had 2 links to my home page in my footer. When I removed the links from my footer the problem went away.

"javascript:;" tooltip when using gwt widget

I'm using the gwt UlTabBar (com.google.gwt.user.client.ui.UlTabBar).
When mouse over this tabbar, a small tooltip in left bottom corner of browser with "javascript:;" label occurs.
Is there any way to disable this tooltip? (it doesn't look nice)
Thank you!
I'm reading between the lines here but:
you are using Chrome, and what you see is the target of a link
TabBar doesn't use links by default, so it means you're putting those links inside the tabs
javascript:; is generated either by an Anchor with no href, or an Hyperlink without target history token.
In any case, a link without target is by definition not a link. Don't use a link if you mean something else.

iFrame move page up to parent div / top

I have an iFrame within a parent page the length of the content varies from page to page in the iFrame so I would like to have the page jump back up to the top in certain situations.
This works fine in IE where breadCrumb is the id of a div in the parent window.
<script>
window.parent.location = "#breadCrumb";
</script>
It jumps the page to the right spot and the url is the parentwindowurl.aspx#breadCrumb
However in Chrome and Firefox this does not work it changes the page to the url iFrameurl#breadCrumb which replaces the parent page and has no breadCrumb div.
Does anyone know how I can get this to work in Chrome and Firefox?
Or is there a better alternative I should be using?
Try this one
window.parent.location.href = "#breadCrumb";
Assuming you want it to the very top, it's easy
https://developer.mozilla.org/en-US/docs/DOM/element.scrollTop
window.parent.scrollTop(0);
sorry it might actually be
window.parent.document.body.scrollTop(0);
if not, please let me know the error
The location hash is normally used to scroll to an anchor tag with a matching name attribute, so you would need to have a tag like:
<a name="breadCrumb"></a>
in the parent frame in order to have the browser scroll to that content with a location hash.
I'm not familiar with this behavior on div tags; that might be an IE-specific feature.

javascript entire page fly in and out effect?

Recently I came across a site that had an interesting effect, I can't remember which site it was. The effect is that on navigation click, the entire current page fly away to the top-right corner and disappear, and the new page flys in from the bottom-left and occupy the browser window.
Does anyone know where I can obtain a example code of this effect? Thanks.
Try this
effects
Instead of divs you can do this for your whole page (body element).
First you have to define a class for all links () tags. When the user clicks any link you can call the effect for the whole page.(i.e first on the current page and then when the new page loads you again call the effect)
that's called single/one page theme. see this demo:
http://themeforest.net/item/stratum-html-single-page-template/full_screen_preview/1668778
http://themeforest.net/item/volemo-html-one-page-template/full_screen_preview/1359429
try jquery .scroll()
the key concept is you create a single large page (eg. height: 2500px) then assign anchor-link scroll to fix position.
You can acheive Similar effect on normal site by doing the following to the main body tag
add a click event on the navigation links which uses jQuery effects to slide your page out fast
add an onload($(document).ready();) event to all the pages which slides in the body as you want

Categories