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);
});
});
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'm trying to have it so when the user clicks a link it scrolls down so that the blue area is off the top of the page.
This is my jsFiddle
I think the code would be something like this:
$("#scroll").click(function() {
$('html, body').animate({
scrollTop: $("#jumbo").offset().bottom
}, 2000);
});
However it doesn't seem to work. Can anyone tell me where I have gone wrong please?
offset() only exposes the top and left properties. To get the bottom you need to add the height to top:
$('html, body').animate({
scrollTop: $(".jumbo").offset().top + $(".jumbo").height()
}, 2000);
Updated fiddle
Also, note that in your example jumbo is a class, not an id.
I think you're looking for scrolling to the first .midheight div:
$("#scroll").click(function() {
$('html, body').animate({
scrollTop: $(".midheight:eq(0)").offset().top
}, 2000);
});
Updated Fiddle
You don't need to use jQuery for this, you can simply use anchors.
Anchors are links but with hashes, for example:
<a name="scroll_down"></a>
These can then be targeted with a normal link, but set out like this:
Clicking the link will scroll you down the page to where the anchor is put in your HTML.
For the slow animation that you're after, you can look here and use his code. All credit to him for the code, works great.
Here is your updated fiddle
The good thing about this, is you can easily use to it have links to each of the "features" you had in the fiddle and have an anchor above each so the user can scroll down to the appropriate are easily, and without the need for you to have repeating jQuery code.
I'm trying to a create a vertically smooth scrolling website, using jQuery. I am using this JavaScript and this tutorial Smooth Scrolling Website to create the site.
But I'm having trouble with a fixed header, the scrolling works fine but it appears half way down the relevant div because the div is aligning to the top of the page, not just below the fixed header as I would like it too.
I've tried adding an offset to scrollTop but all hell breaks loose on the page, things appearing above the fixed header etc. Just a page mash-up really. If anybody could shed any light it would be greatly appreciated.
$(function() {
$('ul.menu a').bind('click',function(event){
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1500,'easeInOutExpo');
/*
if you don't want to use the easing effects:
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1000);
*/
event.preventDefault();
});
});
I've found this code on StackOverflow (+ $('.fixedheader').outerHeight()) and added it to my code (after scrollTop: $($anchor.attr('href')).offset().top) it does work but seems to have the opposite effect. Anybody know why?
I've solved this,
+ $('.fixedheader').outerHeight()
Should be
- $('.fixedheader').outerHeight()
So silly of me, cheers anyway guys.
Is it possible to keep a simple function like this here:
$.fx.speeds.xslow = 1500;
function goToByScroll(id){
$('html,body').animate({
scrollTop: $("#"+id).offset().top
},'slow');
}
and make it for horizontal scrolling?
I want to keep things simple like this without using a big horizontal plugin. I was thinking scrollLeft, but could not get this to work with the offset... Any ideas would be great! Thanks in advance
Like you said, you can do this using scrollLeft:
function goToByScrollHoriz(id){
$('html,body').animate({
scrollLeft: $("#"+id).offset().left
},'slow');
}
See this fiddle for a working example (make sure Div #3 isn't visible on the page when you run it).
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?