I have observed that after a refresh, by pressing F5 or even some location.reload();, the browser forces a scroll to the last position it was before the refresh.
The thing is, we track the user's progress across the page, and this "automatic" scroll fires all the checkpoints we have placed all the way to this last position before the refresh.
We are wondering whether is it possible to differ this "automatic" scroll from a scroll made by the user.
For instance, we have lots of:
$(window).scroll(function() {
var windowMax = $(window).scrollTop()+$(window).innerHeight()/2;
if (windowMax > .....)
});
Is there a way to differentiate this two sorts of scrolls?
Edit
Please, see that I don't want to prevent the automatic scroll, I want to differ it.
You can add a ready event listener and immediately check the .scrollTop() after it has been loaded.
var isScrolledAfterRefresh;
$(function() {
isScrolledAfterRefresh = $(window).scrollTop() > 0;
});
You do need to be sure that the rest of your code is executed after the ready event is fired.
This is something embedded in the users browsers. One way to counter it I suppose is to not have scrolling enabled on body or HTML, and have a custom scroll inside an element that is not on the top layer
You could also deffer recording of the scrolling until the page has fulling been rendered and the document completely loaded.
You could use the following to do stuff when the document is ready :
$(document).ready(function(){
// do stuff here
});
Related
I have a long page with lots of data tables of hidden content.
They are hidden as they are quite repetitive so not all users want to have to scroll past them all the time.
Frequently down the page there is the option to click to open up all of the hidden data tables.
The problem is, if you go half way down the page and click to open up the tables, all of the content being revealed above the current view causes the page to scroll down, meaning the user becomes disorientated as to where they are on the page.
I've mocked up the problem here. If you scroll down to one of the "show more" links nearer the bottom of the page you'll see what i mean.
http://jsfiddle.net/LnubwdzL/
I want the clicked link to remain static under the cursor so that the user knows where they are.
This kind of a solution:
$("a").on('click', function() {
$('html, body').animate({
scrollTop: $(this).offset().top
}, 2000);
});
... from other questions on SO, doesn't seem to cut it. Even if it ends up in the right place the page still moves about a lot before coming to rest.
If I understand it correctly and as I mentioned in comments, I think you can set the same duration value to both your slideDown(); and your animate() functions, and have them both inside the same click handler.
Your code may then become:
$('a').on('click', function(e){
e.preventDefault();
if($('.hide').length>0){$('html, body').animate({scrollTop:$(this).offset().top},400);}
$('.hide').hide().removeClass('hide').slideDown(400);
});
Hope this helps.
Update #1: Added a check on top of animate() so it does not animate when there is no $('.hide') element present anymore.
Update #2:
Take a look at this resulting fiddle of another experiment. Let me know if this was what you were looking for.
The way this works is:
Upon click of an anchor, offset().top of clicked element is first
stored in a variable named prevOffset.
Current $(window).scrollTop() value is also stored in a variable named
scrollTop.
Then all the .hide elements are temporarily made visible via $('.hide').show();.
Another offset().top of the same clicked element is then stored in a variable named currOffset.
All the .hide elements are made invisible again via $('.hide').hide();.
scrollTop is then animated to a value calculated as: scrollTop+(currOffset-prevOffset).
All $('.hide') elements are animated via slideDown().
JavaScript:
var duration=400,hideElements=null,scrollTop=0,prevOffset=0,currOffset=0;
$('a').on('click',function(e){
e.preventDefault();
hideElements=$('.hide');
if(hideElements.length>0){
scrollTop=$(window).scrollTop();
prevOffset=$(this).offset().top;
hideElements.show();
currOffset=$(this).offset().top;
hideElements.hide();
$('html, body').animate({scrollTop:scrollTop+(currOffset-prevOffset)},duration);
hideElements.removeClass('hide').slideDown(duration);
}
});
Hope this is what you were looking for.
In JavaScript I am looking for a moment when user scrolls to some <div>. Then I want to stop user's inertial scrolling and scroll to some another object via script.
How can I stop the scrolling which has already started?
So I want something like this:
$('#selector').stopScrolling().scrollTo('#another_object');
I know that $('#selector').stop() stops animations, but it seems like it can't help me there
Instead of using .scrollTo(), use
// see http://www.learningjquery.com/2007/09/animated-scrolling-with-jquery-12/
$('html,body').animate({ scrollTo: 0 }, 1000);
then you can stop the scrolling using
// see http://stackoverflow.com/a/2836104/145346
$('html,body').stop();
Basically I want to see if a user has a hold of a scrollbar on my site. is there a Jquery function I can use to return a Boolean based on weather the user has a hold of the scrollbar or not?
Edit: adding my site so you can see the problem. When you try to scroll the scrollbar up the timed event to set the scrollbar to the bottom kicks in and sends it to the bottom. I need it to not do that while focus is on the chatbox/chatbox scrollbar, but it's not working: http://exvs.us/
If you really need to accomplish this, one way would be to hide the default scrollbar and create your own in javascript. You can then handle click events on your scrollbar. However, this won't work well for users that have javascript disabled by default.
Use scroll method of the Jquery object :
more information there => http://api.jquery.com/scroll/
sample :
$(window).scroll( function () {
console.log('pretty easy no ?');
});
I currently have a page that is being resized through the use of javascript whenever the end-user resizes the window, so that scrolling is reduced or eliminated when not necessary. I have a loader.js jquery file which picks out .html documents to throw in to the content section of the page when the user selects an option from the left menu:
$("#response").load("home.html");
$("#home").click(function(){
// load home page on click
$("#response").load("home.html");
setTimeout("resizefunc()",500);
});
$("#about").click(function(){
// load about page on click
$("#response").load("about.html");
setTimeout("resizefunc()",500);
});
//etc
While these timeout functions work most of the time, they have the potential to fail if the page loads abnormally slow for any reason. I am using document.ElementId.scrollHeight to determine the height of each new page, but it seems to only detect the height after the changes have been correctly applied. If the javascript loads before the page content then the resize fails.
It seems that if I were using complete html documents for each page then the problem would be irrelevant. I could put an onLoad event in to the body of each one and have it resize there... But since the tag is only loaded once I'm somewhat at a loss. My current implementation "works", but I feel that there should be something more efficient.
Don't use onLoad, instead wrap your code in
$(window).load(function() {
// your code here
});
Also, instead of load() with just the filename as a parameter, use:
$('#response').load('file.html', function() {
resizefunc();
});
Along with "load" you could also use "resize" as one of the events. This would allow dynamic resizing.
$(window).resize(function() {
resizefunc()
});
function resizefunc()
{
// code to resize.
}
See: http://api.jquery.com/resize/
I know how to get the scrollTop of a page, I use this simple JS function (code copied around):
function GetScrolledTop()
{
//I never work in IE quirkmode, I always use DOCTYPE as 1st line, so I don't need to test for document.body.scrollTop
return self['pageYOffset'] || document.documentElement.scrollTop;
}
This works and my problem is the following: I tried to add it in the page onload event
<body onload="alert(GetScrolledTop());">
On page load I get ZERO (which make sense), but the problem is that I get ZERO even if I scroll the page and then reload it without touching the scrollbar.
It seems like the browser does:
loads page
calls my GetScrolledTop() (so obviously shows ZERO)
then scrolls the page to where it was before.
Do you know how to get the scolledTop after the step 3?
I mean how to get the scrolledTop AFTER the browser scrolled the page?
(maybe without using a timer)
Probably not without using a timer. But you might be able to use a timer with a 0ms delay, which would execute the function when the thread becomes idle, whilst still appearing to be instant:
<body onload="window.setTimeout(function () { alert(GetScrolledTop()); } , 0);">
EDIT - Thought it might also be worth mentioning that most browsers support the onscroll event, which should fire after the window scrolls.