Simple horizontal scrolling - javascript

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).

Related

JQuery animate scrollTop doesnt work in one page

I cant solve why animate doesnt work only on one page.
Here is Link: https://tachomaster.pl
For test I add little gray sqaure on the left top corner, if you click this, script should scroll you a little down. As you can see it doesnt work only on main page, on any other it works.
Here is testing script:
$(document).on('click', '.test', function(event){
event.preventDefault();
$('body').animate({
scrollTop: 500
}, 800);
});
you need to hide overflow for all the containers under your body tag
I fix that by changing from
$('body').animate({
scrollTop: 500
}, 800);
to
$('html, body').animate({
scrollTop: 500
}, 800);
I completly dont know why it works that way and didnt work first way ONLY on main page.

Javascript Animate ScrollTop Jumps to Top of Window, Then Bottom

I've got a WordPress menu item with Javascript successfully attached, and I'm trying to make it scroll to the bottom of the page when clicked on. The scrolling itself worked fine, but I found that the page would jump up to the top for a fraction of a second before scrolling down to the bottom. That code looked like this:
$("#menu-item-135").click(function() {
$('html, body').animate({ scrollTop: $(document).height() - $(window).height()}, 500);
});
I googled around for a solution, and ended up with this
$("#menu-item-135").click(function() {
$('html, body').animate({ scrollTop: $(document).height() - $(window).height()}, 500);
return false;
});
All I did was add 'return false;'. That solved the jumping to the top problem, but now the page jumps to the bottom before scrolling instead! Does anyone have any other ideas for what I might try?
window.scrollTo(0, 0);
you need to try this.

Jquery scroll-to not scrolling

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.

jump sections before starting scrolltop animation

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);
});
});

jQuery offset fixed header using scrollTop

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.

Categories