We Keep Coding

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.

smooth scroll a div to top just below header

How to smoothly scroll a div to top of the page but just below the header.
I have the code in jquery but I need to convert this to pure java-script and should be working in all the latest browsers.
$('html, body').animate({ scrollTop: $("#mydiv"+id).offset().top - 55 }, 699);
I got the java script function to scroll but not the animation.
document.getElementById('mydiv'+id).scrollIntoView(); scrollBy(0, -55);
Can someone help me here , I need to add a small animation to the scroll. Thanks.

Jump to the bottom of the page with jQuery - Without animation

How can I jump to the bottom of the page with jQuery?
I don't want a smoother animation, just to 'jump'. All the other questions on this site I found seem to involve an animation.

This will do
$('html, body').scrollTop( $(document).height() );
scrollTop( vHeight );

WITH ANIMATION
$("html, body").animate({ scrollTop: $(document).height() }, "slow");
WITHOUT ANIMATION
$('html, body').scrollTop( $(document).height() );

$('#smthn').scrollTop(99999999999);
99999999999 is the max input for jquery and it can take element to the last scrolling position.

You can use an anchor tag for this, no need of jquery.
Put an anchor tag at the bottom of the page just before </body> tag. such as
<a name="pageend"></a>
And, from where on the page you can jump to the bottom, put another anchor tag just like this.
Jump to page end

How to scroll to left on html?

I am building a single page website. I have common website stuff on it like: services, portfolio, contact, blog, etc.
If someone clicks the navigation menu for 'services', 'portfolio' and 'contact' it scrolls to the item that the user wants. Normally this is up and down scrolling so there is no problem.
The idea I have is when the user wants to go to the blog, it scrolls to the right or make a push effect of the blog coming from right to left. Right know I have something working. The problem is that when I am on the last section, which is contact, this is at the bottom of the page. If I want to go to the blog it is scrolling to the top and then to the right to see the blog.
I am pretending to remove that scroll to the top, and just make a right scroll and see the blog section from the top.
Any idea on how to handle this? Or would it be better to have an independent html file?
Edit
http://jsfiddle.net/VS9dS/20/
scroll from blog to any section and/or moving from any section up or down.
$('html, body').animate({scrollLeft: -$(sectionName).offset().left}, "slow");
$('html, body').animate({scrollTop: $(sectionName).offset().top}, "slow");
scroll from any section to the blog:
$('html, body').animate({scrollTop: $(sectionName).offset().top}, "slow");};
$('html, body').animate({scrollLeft: $(sectionName).offset().left}, "slow");
I didn't add much code for the lack of time. Right now is working on my code that if I'm on contact section and I click the blog contact it scrolls to the top and then scrolls right to the blog section, and blog section looks like a complete different html.
What I would like it to do is the if I'm on contact section and clic to the blog just do a left scroll and show the top of the blog, and the same way if I'm on services, home

If I got you right and you just want to first animate one thing and then the other, you could do something like this:
$('html, body').animate({
scrollTop: $(sectionName).offset().top
}, "slow", function () {
$('html, body').animate({
scrollLeft: $(sectionName).offset().left
}, "slow");
});
...or I can try again and you wanted to animate a scroll to the right after scrolling to the top. Then you could do this:
$('a[href=#blog]').click(function () {
$('html, body').animate({
scrollTop: $('#home').offset().top
}, "slow", function () {
$('html, body').animate({
left: '-=200px'
}, "slow",'linear'); //looks better I guess
});
});
CSS:
body {
position: relative;
}
Fiddle: http://jsfiddle.net/Matze/eRNde/
http://api.jquery.com/animate/#basic-usage

How could I modify this template to add buttons that would scroll to the next section?

I am trying to make a horizontally scrolling Web Page. This template uses J Query and CSS to control width, but the User still has to drag the scroll bar across the bottom - how would I add arrows or something that the User could just click on and it would go over to the next section?
http://css-tricks.com/how-to-create-a-horizontally-scrolling-site/

Check out this JQuery plugin http://plugins.jquery.com/project/ScrollTo

You can use scrollLeft and offset() to determine what to scroll to:
A next button might look like this (Based very closely on a sample in Chapter 7 of jQuery Enlightenment):
$(".next").click(function(e){
$('html, body').animate({
scrollLeft: $(this).closest('td').next().offset().left
}, 1000);
e.preventDefault();
});
I am assuming you followed the CSS-Tricks article closely, which means you have a table on the page.
If you didn't want the animation you could do it this way:
$(".next").click(function(e){
$('html, body').scrollLeft($(this).closest('td').next().offset().left );
e.preventDefault();
});