Why wont this work in IE, if I move the scroll bar to the middle then Refresh it will not reset to zero, instead it stays where is was last left?
$(document).ready(function(){
$(window).scrollLeft(0);
});
Thanks
This script should work as you need
$(document).ready(function ()
{
$(window).bind("scroll", ScrollOnLoad);
// IE fix, remove scroll handler after 150ms
setTimeout(UnbindScroll, 150);
});
function ScrollOnLoad() {
UnbindScroll();
$(window).scrollLeft(0);
}
function UnbindScroll() {
$(window).unbind("scroll", ScrollOnLoad);
}
As you find out, the behaviour of IE is different. It triggers scroll event even after document.ready. This script will hook up on this event and scrollLeft(0) after refresh (in all browsers).
The complicated part is, how to solve new comers, when user visits the page for a first time. Then Internet Explorer does not fire scroll event. And our handler is still in play (and would scroll left when user first time scroll right).
We have to unbind scrollLeft manually. That's why after 150ms is the handler unbounded anyway.
try
$(window).load(function(){
$('body, html').scrollLeft(0);
});
try
$(document).ready(function(){
$('body, html').scrollLeft(0);
});
Related
Hi guys I am using the scroll function on this script but it fires each time a user scrolls. I want it to only fire once when the user scrolls down to #ror. I tried using the fired variable to check if it has already been fired but that didn't seem to work. I know some people have answered this before but this is where i got the fired solution from and cant get it to work only once. Anyone think they can help please?
$( window ).scroll(function() {
var fired = 0;
console.log(fired);
if(fired == 0){
$('#ror').html('');
$('#ror').goalProgress({
goalAmount: 100,
currentAmount: 75,
textBefore: 'progress bar',
textAfter: '',
offset: 10,
});
fired=1;
}
});
You need to move the fired variable outside the scroll function.
As you are doing it now you are reinitializing the fired variable and setting it to 0 each time the scroll event gets fired.
var fired = 0;
$(window).scroll(function() {
console.log(fired);
if(fired == 0){
$('#ror').html('');
$('#ror').goalProgress({
goalAmount: 100,
currentAmount: 75,
textBefore: 'progress bar',
textAfter: '',
offset: 10,
});
fired=1;
}
});
To detect when a given #target scrolls into view, you can look at it's top position, and check if that position is already inside the viewport.
$('#target').offset().top - $(window).outerHeight() > $(window).scrollTop();
That left part of the equation is constant (as long as you don't move anything around, or change the size of the viewport). Therefore it may be wise to move that outside your event handler function. You need to keep in mind that the scroll event is rather expensive, since it fires constantly when you are scrolling, and the browser is already quite busy with the rendering of the viewport.
When the work is done, you can remove the event handler.
$(window).off(event);
So your final code would look something like this:
var triggerAtY = $('#target').offset().top - $(window).outerHeight();
$(window).scroll(function(event) {
// #target not yet in view
if (triggerAtY > $(window).scrollTop()) {
return;
}
// run your task
// remove this event handler
$(this).off(event);
});
Have a look at the demo: https://jsfiddle.net/6whnfa02/1/
Docs:
http://api.jquery.com/offset/
http://api.jquery.com/outerHeight/
http://api.jquery.com/scrollTop/
http://api.jquery.com/off/
$(window).scroll(function(event) {
var eT = $('#ror').offset().top,
wH = $(this).height(),
wSt = $(this).scrollTop();
if(wSt > (eT-wH)) {
alert('you have scrolled to the ror!');
//detach scroll event handler, as we dont want it to fire again
$(this).off(event);
}
}
The above code checks if user has scrolled down to an element. If yes, alert something and detach the scroll event handler for window. You can refer jquery documentation to see the meaning of offset, height and scrollTop.
Now, as #Pevera pointer out, it is costly to attach event handler to window scroll, you should be aware of that. If you have some heavy code execution inside scroll callback, it will hamper in scrolling the page. So, if you have to attach handler to window scroll, run the scroll callback code within a timeout callback. It ensures to run the scroll callback code after certain delay which helps to scroll the page better. Rewriting the above code with timeout will look like this:
var timeout = null;
$(window).scroll(function (event) {
if (!timeout) {
// set a timeout to run after 250ms
timeout = setTimeout(function () {
clearTimeout(timeout);
timeout = null;
var eT = $('#ror').offset().top,
wH = $(this).height(),
wSt = $(this).scrollTop();
if (wSt > (eT-wH)){
alert('you have scrolled to the ror!');
//detach scroll event handler, as we dont want it to fire again
$(this).off(event);
}
}, 250);
}
});
Everytime user scrolls the page, a timeout is set to run after(atleast) 250ms. In the timeout callback, we remove this timeout handler and check if user has scrolled to the element. If yes, we alert something and detach the scroll handler for window so that it doesn't run again.
Please refer to this FIDDLE for better understanding.
More info on this stackoverflow post and John Resig's blog post.
I have a button used to scroll back to the top of the page when clicked.
I want to have an animation effect.
$("#back-to-top").click(function() {
$(document.body).animate({scrollTop: 0}, 800);
return false;
});
When I click on the button, it did scroll back to top. However, I can't scroll down and it seemed when I scroll down the function is called.
When I use
$(document).scrollTop(0);
it works well.
What's the problem?
Here's my Fiddle
I'm new to Fiddle, it just didn't work!
Try like this
$("#back-to-top").click(function(e) {
e.preventDefault();
$("body, html").animate({scrollTop: 0}, 800);
});
Update
According to your fiddle, you have to put this function outside of $(window).scroll( function() {});
Your problem is actually browser based, I tested this in Firefox which it didn't work. I then tested it in Chrome and it worked fine. Try using $('html, body').animate({scrollTop:0},500); instead.
http://codepen.io/Snowfiring/pen/oKpBh
I'm attempting to disable the animation on click because when clicked, the animation starts moving and if your still hovered over an object it freezes, the end result is the animation stops running and it just moves,
my code to freeze the animation on hover is
function show_box() {
if($(window).width() > 768) {
$('.tab-content').hide(0,
function() {
$(this).prev().css('right', '29.337803855%');
$(this).prev().children().children().click(function () {
$('.favorite').off('mouseenter').css('-webkit-animation-play-state', 'running');
$('.secret').off('mouseenter').css('-webkit-animation-play-state', 'running');
$('.current-projects').off('mouseenter').css('-webkit-animation-play-state', 'running');
$('.tab-selection').animate({right: 0}, 3000).queue(function() {
$('.tab-content').show(1000);
});
$('.favorite').on('mouseenter');
$('.secret').on('mouseenter');
$('.current-projects').on('mouseenter');
});
}
);
}
}
to disable hover on mouseenter and mouseleave i used
.off('mouseenter')
but after the function is done, and the moving complete I set
.on('mouseenter')
but it doesn't re-enable.
At first your code could be much shorter, i think.
And please take a look in the jQuery doc for the on function it does Not, what you are expecting!
I think you should set a global variable if it is disabled at the moment and in the eventhandler you firstly check the variable and abort if its disabled.
No matter what method I use to detect scrolling on the page the event is triggered twice. Please see the code for the different methods I have tried.
<body onmousewheel="alert('Why are you alerting twice?')">
or
<script src="js/jquery-1.8.3.min.js"></script>
<script>
$(window).scroll(function(){
alert("Why are you alerting twice?");
});
</script>
or
window.onscroll = please_scroll;
function please_scroll() {
alert("Why are you alerting twice?");
}
I have even tried using $.debounce.
In case it is of any use I will explain what I am trying to do:
When the user scrolls the wheel either up or down, the page will animate the scroll to the next full width content div. I have code that is successfully doing this onclick of my menu, but I would also like it to happen as the user scrolls, essentially auto assisting them with scrolling to each part of my page. This is the function I currently have for scrolling:
function scrollTo(id){
// Scroll
$('html,body').animate({scrollTop: $("#"+id).offset().top - 110},'slow',function(){
animation_active = "false";
});
}
many devices can trigger scroll events which appear to happen once more often. simply use a timeout for that:
var timeout;
$(window).scroll(function() {
clearTimeout(timeout);
timeout = setTimeout(function() {
// do your stuff
}, 50);
});
you can play with the value 50, i recommend something between 50 and 150.
I'm probably missing something really obvious here. I've basically created a 'back to top' button that animates to the top of the page when clicked. The script doesn't seem to be pairing up with the jQuery i've written:
Back to top
<script type="text/javascript">
$(document).ready(function(event){
$('.back-to-top').click(function(){
event.preventDefault();
$('body').animate({"scrollTop": "0px"}, 600)
})
})
</script>
Other jquery elements are working fine on the site.
Currently when the button is pressed the screen scrolls to the top of the page instantly which means the preventDefault isn't working, the animation time of 600ms isn't working or both.
Like I said it might be something really obvious but any help would be appreciated.
event parameter should of onclick function of back to top button
http://jsfiddle.net/hellosze/MMgXu/ check this link
try
$('.back-to-top').click(function(event){
event.preventDefault();
$('body').animate({"scrollTop": "0px"}, 600)
})