I want to check if page is scrolled after it has finished loading and I'm using this code:
$(document).ready(function(){
alert($(window).scrollTop());
});
It works well in Firefox but allways returns 0 in Chrome. Why is this?
Actually Firefox is the only browser that doesn't return 0 for $(window).scrollTop() on domReady or window.onload. Chrome, Safari and IE all return 0. The only safe way to get correct position of scrollbar on domReady is, as mentioned in another answer above, to set an event handler on window's scroll event as below:
$(document).ready(function(){
$(window).scroll(function() {
console.log($(window).scrollTop());
$(window).unbind('scroll');
});
});
$(window).scrollTop() will return 0 when the window isn't scrollable.
The chrome restores the pre-refresh scroll position once the DOM is loaded. So, getting scrollTop on scroll event instead of ready event will work.
I also had the problem that scrollTop() always returned 0 in Chrome, whether I used it on window, on document or on 'html,body'. I finally found out that css was the problem:
html, body {
height: 100%;
overflow-x: hidden;
}
Actually, I don't know exactly why because you can remove parts of this code and then it works again. Strange but problem solved ;)
Try the following code in a page that has some text and a link in the bottom of the page. Remember to have enough text or blank lines in order to make a scroll of the page until you can see the my button
$(document).ready(function () {
alert($(window).scrollTop()); // first load if you did not scroll = 0
$("#button").click(function () { alert($(window).scrollTop()); });
// hitting the button that is located on bottom of page
// - i had to scroll the page = xxx (68 in may case)
});
It is normal in your case to get 0 because the page is not scrolled, the offset between your position and the top of the page is 0.
I tried in Chrome, FF6, IE9.
I hope i was helpful.
I had the same problem but got fixed by adding the document declaration:
<!DOCTYPE html>
Related
It seems like in Safari ( ver: 9.1 ), neither jQuery nor vanilla JavaScript catches the scroll event.
My goal is to catch the scroll position and if it is below 50px, fix the nav bar by adding a class, and otherwise remove that class.
The code snippet I placed below works in Chrome, Firefox and IE but not in Safari.
$(window).on('scroll', function(){
if( $(window).scrollTop()>50 ){
$('.navbar').addClass('nav-fixed');
}
else {
$('.navbar').removeClass('nav-fixed');
}
});
I'm experiencing the same thing here in Safari v. 10.0.1.
window.addEventListener('scroll',function() {
// Nothing happens here in Safari. Scroll event is never fired.
});
EDIT: I had an issue with my CSS that fixed the problem. I had some old stuff for scroll snap points (which I don't need) that I forgot to delete from my CSS. On a div surrounding my content I had
height: 100vh;
So it makes sense that the scroll event on the window would not be fired, because I would be scrolling inside my div instead.
apparently .scrollTop() works only in webkit browsers... is this possible? that's very strange because i found some questions here in stackoverflow titled "scrollTop works only in Firefox" but what is happening to me it's different
$(window).scroll(function() {
console.log($('body').scrollTop())
})
even if i replace window with document nothing changes. the funny thing is when i run this function and i scroll down the page the value still 0 BUT the red little badge beside the number 0 changes at every pixel scrolled...
In chrome and opera this works perfectly.
i'm running Firefox 34.0 on Win7x64 and i'm using jquery 2.1.3
This is because WebKit sets the scrollTop for the main document on the body, while other browser use the html element. However, you can just use window instead of 'body' or 'html' to get the main document scroll position.
$(window).scroll(function() {
console.log($(window).scrollTop())
});
BTW, calling jQuery on an object isn't the fasting thing in the world, and scroll events can fire very rapidly. Consider caching $(window) in a variable for improved performance.
var $window = $(window);
$window.scroll(function() {
console.log($window.scrollTop())
});
If you need scrolltop position, i prefer use offset:
$(window).scroll(function() {console.log($('body').offset().top) })
I'm running into a problem that's actually a "feature" on Chrome.
As most of you might know, Chrome remembers a scroll position that it returns to, whenever you come back to a page. And I kind of have a problem with that.
Is there any way to override this without the user noticing?
Mees
Failed try-outs:
ScrollTop on document.ready
In Chrome 46+, the auto scroll behavior can be turned off using history.scrollRestoration:
if ('scrollRestoration' in history) {
history.scrollRestoration = 'manual';
}
source: https://developers.google.com/web/updates/2015/09/history-api-scroll-restoration
I've checked on chrome, it worked well. Sometimes setTimeout does trick :)
<script type="text/javascript">
window.onload=function(){
setTimeout(function(){
scrollTo(0,-1);
},0);
}
</script>
x = 0; //horizontal coord
y = document.height; //vertical coord
window.scroll(x,y);
Some Javascript like that may very well be able to be manipulated to stop the auto scrolling.
It depends though, are you happy for the scroll to be simply set to automatically go to the top, or are you actually looking for the Chrome standard option to take the page to last scroll position, to be turned off completely?
What are you currently attempting to use for scrollTop()?
I solved this by attaching to scroll event, and then resetting scroll position the first time a user scrolls. Works for on-spot reloads for me.
Looks like this:
var scrollResetOnce = false;
$(window).on("scroll", function() {
if (scrollResetOnce) return;
scrollResetOnce = true;
scrollTo(0, -1);
});
Here is a clean way of getting this done.
window.addEventListener('unload', function(e){
document.body.style.display = 'none';
});
By simply setting the body display to 'none' you don't have to worry about a flash of the browser scrolling to the top of the page before it is unloaded and the scroll position will automatically be reset to 0.
I set the javascript window.onresize event to run other functions that fit div's size with the body's size. The problem is that when the screen is resized by adding a comment (using disqus), the divs whose sizes are supposed to fit with the new body's size, don't fit. I mean onresize function isn't being ran.
As you can see, the right side div doesn't grow as comments are being added (see the border). Do you have any idea about how make onresize event work?
PS: When I open developer tools on firefox, the div is resized, I don't know why, but the onresize event is ran. Only in this situation.
Edit: Tried to run this jquery script:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
<script>
$(document).resize(function(){
tamanho_barra();
});
</script>
But, isn't working yet. I've tried to change the "document" to a random div and see if something would happen, but nothing. I have no idea about what is the problem. Could you help me please?
Edit2: Working now with rcabral's help. He told me to add a background image to the content which is a black point of 1px and repeat it until the bottom of the page.
#content { background:url('<?php bloginfo('template_directory'); ?>/images/gray_dot.gif') 634px 0px repeat-y; }
Your script isn't run automatically. You must include it inside a function that is run when the DOM is ready: $(document).ready(function() { here }); or $(function() { here });
For example:
<script>
$(function() {
$(window).resize(function(){
$("#barra").tamanho_barra();
});
});
</script>
And your code has a few errors:
1. You are using two opening parentheses after "resize" instead of just one.
2. And you should select window instead of document for the resize function.
I hope that helps.
There's a jQuery plugin that will let you target the container element that Disqus is running in.
Here's a demo: http://jsfiddle.net/hansvedo/S3R7w/
Here's the plugin: http://benalman.com/projects/jquery-resize-plugin/
And here's the syntax:
$('div#disqus-container').bind('resize', function(){
// your code
});
Here's a frustrating problem. I use the following in script inside of a jQuery load block:
window.scrollBy(0,-100);
I do it because I set a div to be fixed at the top of the page through scrolling, and this line will compensate so that the anchor you've clicked to (http://page.html#foo) is seen where it should be.
It works great in Firefox. In Chrome and Safari, it doesn't, because the load event appears to happen before the browser scrolls to the anchor.
Any suggestions?
I came across into the same problem, and this is my work out. (A hack actually)
// Clicking on the navigation bar
$('.navbar-nav a').click(function(e) {
// Blocking default clicking event
e.preventDefault();
// Scroll to the anchored element with a delay
setTimeout(function() {$('#talks')[0].scrollIntoView();}, 5);
// Compensate the scrolling with another delay
setTimeout(function() {scrollBy(0, -$('#info').height())}, 10);
}
It seems like it's a Safari bug.
I also came across this problem. Using a timeout, even 0 ms, seems to work without visible jumping. Try this:
window.setTimeout()
{
window.scrollBy(0, -100);
}, 0);