I need an HTML page to automatically scroll down when the page loads. So basically loads at the bottom.
Can JavaScipt be used?
Please can you help me or lead my in the right direction.
All help is appreciated.
thanks
Try this:
window.scroll(0, document.documentElement.scrollHeight)
Here is a method that worked for me:
Expected outcome:
No scroll animation
Loads at bottom of page on first load
Loads on bottom of page for all refreshes
Code:
<script>
function scrollToBottom() {
window.scrollTo(0, document.body.scrollHeight);
}
history.scrollRestoration = "manual";
window.onload = scrollToBottom;
</script>
Why this may work over other methods:
Browsers such as Chrome have a built-in preset to remember where you were on the page, after refreshing. Just a window.onload doesn't work because your browser will automatically scroll you back to where you were before refreshing, AFTER you call a line such as:
window.scrollTo(0, document.body.scrollHeight);
That's why we need to add:
history.scrollRestoration = "manual";
before the window.onload to disable that built-in feature first.
References:
Documentation for window.onload: https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload
Documentation for window.scrollTo: https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo
Documentation for history.scrollRestoration: https://developer.mozilla.org/en-US/docs/Web/API/History/scrollRestoration
Something like this?
<html>
<head>
<script type="text/javascript">
function moveWin()
{
window.scroll(0,10000);
setTimeout('moveWin();',1000);
}
</script>
</head>
<body onLoad="moveWin();">
<!---- TEXT HERE ---->
</body>
</html>
If you want the page to load at the bottom and not show the scrolling animation, why not add an anchor tag to the very bottom of the page and have your link go straight to it (e.g., http://www.mysite.com/hello#bottom)? Your anchor tag could look like this: <a name="bottom" id="bottom"></a>
If you are wondering why I provided both name and id in this example, name is deprecated on <a> elements as of XHTML 1.0. Until name is absolutely no longer supported by the (X)HTML standard you are using, it may be safest to use both name and id on anchors linking to a part of the same page. This was noted in W3C's XHTML 1 spec.
Using jquery you could do this:
$("html, body").animate({ scrollTop: $(document).height() }, "slow");
Related
i have a WordPress site and problems with anchors. i have a page with several anchors which are linked to in the main menu. when i am on the page itself, all anchors work fine, but if I'am on any other page, they don't work, at least not in all browsers and the anchors are ignored.
As being informed it is a chrome bug, ive found this solution:
<script type="text/javascript">
jQuery(window).load(function(){
var hashNum = 0;
if (window.location.hash != ''){
hashNum = window.location.hash.replace("#oneofmanyanchors", "");
console.log('hashNum: ' + hashNum);
};
hashMenu = jQuery('[data-q_id="#oneofmanyanchors"]').offset().top;
jQuery('html,body').animate({
scrollTop: hashMenu
}, 0);
});
</script>
above code is working and fixes the issues i had in chrome and ff.
however i need this added functionality: At the moment it is addressing only one specific anchor, but i need it to work with any anchors in the page url, not just the one above (anchors are referenced with the data-q_id attribute).
so the code needs to be updated that it grabs any given anchor from the page URL and go to / scroll to that anchor (once) via jquery after first page load.
How do i achieve this?
Thanks in advance!
PS: The problem is caused by theme incompatibility with a certain plugin i need...
I think this should work in every browser - what happens to be the problem?
In order to achieve this in jquery you should scroll to the element/anchor with javascript as soon as the document is loaded.
So like this:
$(function() {
location.hash = "#" + hash;
});
I still think you should find out what went wrong and why the linken from another page doesn't work in some browser before using a workaround for the problem. Your code will just ged more and more messy like that.
How to scroll HTML page to given anchor using jQuery or Javascript?
and here
$(document).ready shorthand
I need to scroll down about 50px when the page is loaded. This is what I'm using:
$(window).load(function(){
$("html,body").scrollTop(55);
});
I've also tried:
scrollTo(0,55)
This works fine in Firefox and IE, however in Chrome, Safari and Opera it scrolls down to the proper position and then jumps back up to the top(or the last scroll position).
I've also tried using an element id to scroll down, but the browser still overwrites it. I tried like this:
htttp://website.com#element
I think your problem is that you are using $(window).load and some browsers are having problem as things havnt fully rendered yet. Try swapping to
$(document).ready(function(){
$("html,body").scrollTop(55);
});
Seems to work fine in all browsers here http://jsfiddle.net/7jwRk/1/
Info
$(document).ready
executes when HTML-Document is loaded and DOM is ready
$(window).load
executes when complete page is fully loaded, including all frames, objects and images
<script type="text/javascript">
$(document).ready(function(){
var divLoc = $('#123').offset();
$('html, body').animate({scrollTop: divLoc.top}, "slow");
});
</script>
Add id="123" to any <div> it will automatically scroll it down when page loads.
Here's an another script if the previous one wont work !
<script>
window.setInterval(function() {
var elem = document.getElementById('fixed');
elem.scrollTop = elem.scrollHeight; }, 3000);
</script>
Add id="fixed" to any <div> it will automatically scroll it down when page loads.
You can use the scrollIntoView() function. This is supported accross most browsers (even IE6).
document.getElementById('header').scrollIntoView()
After messing with scrollIntoView(), and observing it scroll correctly at page paint time, then snap to the top for no reason, I went with this:
http://website.com/#target
and
<a name="target">
Then the browser understands exactly what I need and does it. But I can only do this because we control the URI, so it naturally also won't work in all situations.
Alternatively, just fire this at the end of your body:
...
<script type="text/javascript">
$("html,body").scrollTop(55);
</script>
</body>
</html>
If you are using 2 monitors, be sure that when you open the window of your browser with the page for which the script is implemented, you don't move that window to the other monitor, with a different screen resolution. Shortly: don't cross the windows of the browser to a different monitor, just open a new window of the browser for each monitor/ screen resolution.
I'm looking to simply hide and image before the page loads and then once the page has loaded to show the image. Problem is when I try to show the image it doesn't show the image at all.
Here is my html code:
<body>
<div id ="splash" data-role="page">
<center>
<div id='class'> <img src="BookBayText.png"></div>
<div id='book'> <img src="Book.png"></div>
</center>
</div>
</body>
Here is my javascript/jquery mobile:
<script type="text/javascript">
$(document).on('pagebeforeshow','#splash',
function()
{
$("#book").hide();
});
$(document).on('pageinit','#splash',
function(){
setTimeout(
function()
{
$("#class").animate({top: "1em"}, 'slow');
},3000);
//For some reason this line below doesn't run
$("#book").show();
});
</script>
Any ideas why this isn't working??
I managed to get the desired effect I wanted with the following code:
setTimeout(
function()
{
$("#class").animate({top: "1em"}, 'slow');
$("#book").show();
},2000);
Basically I moved the $("#book").show(); line into the setTimeout function. But it still leaves me a tad lost as to why the code wouldn't show the image outside the function. If anyone with the answer to this could update this answer it would really be appreciated.
kinda similar to this post jQuery mobile popup on pageinit .
Although the post blames a delay in the browser, for me it is still unclear why it does it. I have never experience such behaviour.
I wonder what if you do the following changes:
put your center tag inside a data-role:content,
replace pageinit for pageshow.
search your iem as follows
inside either pageinit or pageshow (not settimeout).
>
var elem = $("[data-role='page']:last").find('#book img'); // others may use $.mobile.activePage
if (elem.length) {
// check height or img width here...
}
Im looking for my webpage to jump to an iframe when someone click. I've found one solution which works pretty well which is this: http://jsfiddle.net/RGjCL/4/
<ul>
<li>
Class Name
</li>
</ul>
<script type="text/javascript">
function IFrameScroll(link){
window.myIframe.location=link;
window.location.hash='myIframe'
}
</script>
<IFRAME id = "myframe" onload = "setIframeHeight( this.id )" name="myIframe">
I've tried on my web and it partially works except for the fact it scrolls to the iframe before it loads so it doesn't goes that far to the bottom because once the iframe its loaded the page fully extends.
The web in question is the following: http://www.clavederock.com.ar -
The links are under the tabs "Quienes Somos" "Programacion" and "Archivo".
I hope i made myself clear so you can help me. Thanks in advance!
Try moving window.location.hash='myIframe' from the function IFrameScroll() to setIFrameHeight(), so you'll change the hash once the iframe have the desired size.
EDIT #3:
Since you need to wait until iframe is loaded in order to resize it and window.location.hash doesn't works the second time in chrome, you can try this:
<script type="text/javascript">
function IFrameScroll(link){
window.myIframe.onload = function() {
// this will ensure that the height will be updated after load
setIframeHeight('myIframe');
// This works on FF and IE, and let users to bookmark
window.location.hash='myIframe';
// and this will allow it to scroll the second time for chrome
document.getElementById('myIframe').scrollIntoView(true);
}
window.myIframe.location=link;
}
</script>
I really hope this solve your problem :)
Instead of jumping to the iframe, you could make a smooth scroll. This would give a little more time for the iframe to load after the link has been clicked.
Alternatively and probably more effectively, you could load the iframe with the rest of the page but make it invisible. Then you just need to show it when the user clicks the link
//load the page with the iframe hidden
//in css
#myIframe { visibility: hidden; }
//use jquery to make it visible when the user clicks the link
//you could do this with javascript if you don't want to import jQuery, but I find jQuery easier
$(document).ready(function() {
$('#myAnchorTagId').click(
function() {
$('myIframe').css('visibiliy', 'visible')
}
)
});
I'm trying to understand this conflict between
My loadingbarscript that hides my content until the page is loaded (Removed the tags from the top)
function showContent(){
//hide loading status...
document.getElementById("loading").style.display='none';
//show content
document.getElementById("content").style.display='block';
}
window.onload = function() {
showContent(); }
</head>
<body>
<script type="text/javascript">
document.write('<div id="loading"><img src="ajax-loader.gif"></div>');
</script>
<div id="content">
<script type="text/javascript">
//hide content
document.getElementById("content").style.display='none';
</script>
And 2. My livepipe scrollbar using prototype 1.6.1
Where the call is this:
<script type="text/javascript">
document.observe('dom:loaded',function(){
var scrollbar = new Control.ScrollBar('cases_tekst','scrollbar_track');
});
</script>
For some reason either one works or they other depending on the order. I had several other windows.onload functions that work with the prototype scrollbar but not this one.
Hope to understand better what is turning wrong. No errors show up with firebug.
The mistake must have something to do with the onload call because when i resize my browser window the scrollbar works.
Hope someone can explain the cause of the conflict.
Instead of using window.onload to call showContents, use prototype's Event.observe function. Like this:
Event.observe(window, "load", showContent);
For more info on this function: http://www.prototypejs.org/api/event/observe
For more info on why not to use the window.load event model, check out this site: http://www.quirksmode.org/js/introevents.html
In general, quirksmode.org is a great site for understanding this kind of thing and how they behave in various browsers. That's one of the reasons to use libraries such as prototype or jquery as it standardizes much of the browser's behavior.
I just solved a similar problem with the livepipe scrollbar. The scrollbar wouldn't appear until I resized my browser window in all browsers except firefox. It turned out it was caused by the nature of the content in the scrolling div. I had many irregularly sized images in there. When I replaced them with text or squared them all up it worked fine.