I am using this code to scroll to a certain element on my page:
$("html, body").animate({scrollTop: $(".myDiv").offset().top}, 300);
It works, but there is one issue with it: When the user scrolls down while the script scrolls up, there is some juddering because there are two scroll commands at the same time in different directions - sounds logical to me.
I checked some other sites with such scroll functionality, there is no juddering. So what's the trick to prevent this?
Thats a jQuery bug when you use animate with scrolling, good detection.
I did a research how to turn it off scrolling and find this question : How to disable scrolling temporarily?
Here is jsFiddle. You will see after click; user cant scroll untill animate complete.
$('.myDiv').click(function(){
disable_scroll();
$('html, body').stop().animate({ scrollTop: 0 }, 700,function() {
enable_scroll();
});
});
edit: thanks to galambalazs btw.
an idea - try hooking to the scroll event and use http://api.jquery.com/stop/ to stop your animation
.. bad idea..
same problem with a solution - let user scrolling stop jquery animation of scrolltop?
Related
I'm trying to display a div after scroll animation has finished and hide it when I scroll up/down the page. This is my attempt:
$('#cta').on('click', function(e) {
e.preventDefault();
$('#layer, #servicesContent').addClass('active');
var position = parseInt($('#services').offset().top);
$('html, body').animate({
scrollTop: position - 100
}, 'slow', function() {
$(window).bind('scroll', function() {
$('#layer, #servicesContent').removeClass('active');
});
});
});
it doesn't work. the active class is removed after animation has finished and not with scroll movement.
Any idea?
Thanks in advance
Not exactly sure why, but apparently it takes the window somewhere around 20 milliseconds to exit the scroll state, at least on Chrome, on Windows. Or it might be a jQuery trick to fire the animation function 20ms sooner, so it feels more natural. (Human eye and mind make connections that take tiny amounts of time and maybe they took it into account).
Anyway, in order to make sure you bind after the scroll has ended, give it a full 100ms to finish and bind afterwards:
$('#cta').on('click', function(e) {
e.preventDefault();
$('#layer, #servicesContent').addClass('active');
var position = 120;
$('html, body').animate({
scrollTop: position - 100
}, 'slow', function() {
setTimeout(function(){
$(window).bind('scroll', function() {
$('#layer, #servicesContent').removeClass('active');
});
},100)
});
});
working fiddle.
Please note I had hard-coded a value to position, as #services is not defined in my example.
Also please note that hiding events on scroll is a really bad idea in terms of usability. Users might want to scroll so they view the div better or read it in full, but they will end up hiding it, which would be annoying. I would at least check the scroll event for a minimum velocity or distance in order to hide an element from the screen.
I have this code right now which scrolls to the correct place when a button is clicked:
$("#skills").click(function() {
$('html, body').animate({scrollTop: $("#skills_page").offset().top}, 500);
$(this).addClass("toggled_alt");
$("#skills_id").css("background-color", "#646464");
$("#contact_id, #home_id, #about_id").css("background-color", "transparent");
$("#home, #contact, #about").removeClass("toggled");
$("#home, #contact, #about").removeClass("toggled_alt");
});
What I want to do now is I want the page to scroll to the next div when the scroll wheel is moved down/up. I've been searching google for a while now and all that comes up is stuff about smooth scrolling which is not what I want. Any help would be great, thanks.
Checkout this answer and it's comments, and the MDN page on the wheel event.
Looks like you can bind to the event like this:
$(window).on('wheel', function(event){
But that might be overwhelming as it's each "click" of the mousewheel.
See this fiddle. Only tested in Chrome.
On my page I have new comment box's that stack on top each other every couple of seconds. is their a way to follow the comment box I click on. currently if i click it that box gets pushed off the screen when the other box's load on top and have to scroll down manually to it. I would like to auto follow that box I click on... Focus?
You can use an anchor:
<div id="aDiv"></div>
then
location.href = "#";
location.href = "#aDiv";
Or you can use jquery scrollTop: scrollTop: $(this).offset().top
Or you can use javascript scrollTo: window.scrollTo(elementPos,0)
So, to set the scroll, https://developer.mozilla.org/en-US/docs/Web/API/Element.scrollTop
I would implement this 2 ways
An observer pattern with the boxes, that knows when new boxes are added, which checks a flag. The flag itself is set true when there is focus on any comment box, and false when there is not.
Scrolltop can be jarring in a UI, but perhaps you can figure out a way to animate it, I won't spoon feed you further.
Check out Addy Osmanis book if you need help with design patterns!
http://www.addyosmani.com/resources/essentialjsdesignpatterns/book/
You can use the scrolltop function in jQuery.
//Everytime, you add a comment, scroll the page to the element
$('html, body').animate({
scrollTop: $("#clickedComment").offset().top
}, 500);
Here's a complete fiddle but you will see that there is a logic problem. It's not possible to scroll up when you have many comment above.
I'm trying to make a smooth scrolling in my new website.
Look at this site: http://asher-gallery.com/
There is 3 blocks that I want to link to "a href=#(.*)" that I could make smooth scroll same like that: http://asher-gallery.com/1/.
I change the parameters and its moving to the block location but not with animate...
I hope you guys may help me with this !
THX!
Something like this should work if you wrap it in a click event
$("html, body").animate({ scrollTop: $('#element-to-scroll-to').offset().top }, 300);
CSS classes can not start with numbers, if your class is like class="1", the code is ignoring.
I am attempting to use skrollr and jquery to create a sidescrolling choose-your-own adventure type thing. With my microscopic skills in javascript (trying to improve it) I have managed to work things out except for one thing.
I am animating scrolltop to make the sections play, however, I want to be able to jump sections before playing. since skrollr "plays" everything sequentially, then scolltop naturally wants to "play" everything in between where you are and the "target". I would like to know how to tell scrolltop to check where it is, compare this to the target, and if sections are in between to skip them before it starts the scroll animation.
I guess this is mainly a jquery question. To give you an idea, im using simple jquery like:
$('#chapter4a').on('click', function() {
$('html, body').animate({ scrollTop: 2750 }, 5000);
});
what if I am at 0, want it to animate to 200 over 500ms, then skip to 2000 and animate to 2700 over another 1000ms. What would that logic look like?
Thanks in advance.
jQuery allows you to have different easing in the animations. Maybe worth to take a look at it, it might have what you need and then you don't need to code so much.
But, to answer you question, this should work:
$('#chapter4a').on('click', function() {
$('html, body').animate({ scrollTop: 200}, 500,function() {
$('#chapter4a').scrollTop(2000);
$('html, body').animate({ scrollTop: 2700}, 1000);
});
});