Develop Reference

jQuery - hiding page, scrolling with .animate, then showing the page through .animate's complete function now working

For the site I'm working on I want people to be able to click on a topic, go to that page, then have a button at the bottom of that page which will take them back to where they were browsing before.
The below script did work for that:
$(document).ready(function() {
$('html, body').hide();
if (window.location.hash) {
setTimeout(function() {
$('html, body').scrollTop(0).hide();
$('html, body').animate({
scrollTop: $(window.location.hash).offset().top - 100
}, 100)
}, 0);
}
else {
$('html, body').show();
}
});
However, it's not the nicest UX. When it loads in it either jumps uncomfortably fast to the place I'm trying to get them to or you have to watch it scroll slowly which isn't fun either.
I do have to make it scroll because otherwise it breaks other animations on the page, so I thought I would just hide the entire thing while it's scrolling, then show it or fade it in when it's done.
I wrote the below to do that, and it does hide it, it does show it, and the console log triggers... But it no longer scrolls down to where I want it go.
Any help?
$(document).ready(function() {
$('html, body').hide();
if (window.location.hash) {
setTimeout(function() {
$('html, body').scrollTop(0).hide();
$('html, body').animate({
scrollTop: $(window.location.hash).offset().top - 100
}, 100, function() {
$('html, body').show();
console.log("JHjlkjl");
})
}, 0);
}
else {
$('html, body').show();
}
});

A menu with on page targets and page as target links?

I have problem with a menu. The menu items is a combination of on page #sections and new pages target links. Now for the on page # targets i have a nice scroll animation. But in combo with the page target it doesn't work
I am able to jump to all the section and pages, but i like the scroll to work
This is the scroll javascript
$('a.page-scroll').bind('click', function(event) {
//alert('lets scroll');
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: -160 + $($anchor.attr('href')).offset().top
}, 1500, 'easeInOutExpo');
event.preventDefault();
});

how to Scroll to the end of a div in a single scroll

I have a div with 100% height of the screen and i want it to scroll like this website. One little scroll should take me to the end of a division.
$('html, body').animate({
scrollTop: $("#target-element").offset().top
}, 1000);
I was using this code but its not working. Help

This code should works:
$( "body" ).scroll(function() {
$('html, body').animate({
scrollTop: $("#target-element").offset().top
}, 1000);
});

How to set up a #link to later on a page, but aligning the target with the bottom of the screen

I want to click the about section on my new website and when it scrolls down, instead of it sliding the about section up and aligning the top of the "about" section with the top of the screen, I want to align the bottom of the "about" section with the bottom of the screen.
I'm not sure if this has to be done with javascript or if it can be done with HTML. What are your thoughts?
Here is the function used to scroll to the top. ( Here Is A JSFiddle )
//jQuery for page scrolling feature - requires jQuery Easing plugin
$(function() {
$('.page-scroll a').bind('click', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1500, 'easeInOutExpo');
event.preventDefault();
});
});
Do I just change it to:
//jQuery for page scrolling (to bottom) feature - requires jQuery Easing plugin
$(function() {
$('.page-scroll a').bind('click', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollBottom: $($anchor.attr('href')).offset().top
}, 1500, 'easeInOutExpo');
event.preventDefault();
});
});

There is no scrollBottom, so you'll need to calculate the appropriate scrollTop:
$(function() {
$('.page-scroll a').bind('click', function(event) {
var $anchor = $(this);
var $section = $($anchor.attr('href'));
var scrollPos = $section.offset().top + $section.outerHeight() - $(window).height();
$('html, body').stop().animate({
scrollTop: scrollPos
}, 1500, 'easeInOutExpo');
event.preventDefault();
});
});
http://jsfiddle.net/YjgdS/6/

Selection and focus on element of webpage not working (offset)

My question is a little tricky to explain, but I will try anyway. I have two horizontal tabs which, when you click on them, open a text box content. I'm trying to "focus" on them when they get clicked on. I've found a lot of material online but nothing works except for this code I'm showing below:
$(".accordionButton").click(function() {
$('html, body').animate({
scrollTop: $(this).offset().top
}, 500);
});
$(".accordionButtonone").click(function() {
$('html, body').animate({
scrollTop: $(this).offset().top
}, 500);
If I only click on the first accordionButton it works. If I click on the second accordionButton for first, it works. If I click on the first accordionButton after I've clicked on the second it works, but if I click on the second accordionButton after I click on the first it doesn't work: the focus remains at the bottom of the page. I don't know what could be the problem, I'm making some attempt with the animate function (jQuery tutorial) and the offset function (jQuery tutorial) but I would be grateful even only to know what is going wrong...
UPDATE: a partial solution is
$(".accordionButton").click(function() {
$('html, body').animate({
scrollTop: $(this).offset().top
}, 500);
});
$(".accordionButtonone").click(function() {
$('html, body').scrollTop(0);
});

$(".accordionButton").click(function() {
$('html, body').animate({
scrollTop: $(this).nextAll('div .accordionContent').offset().top
}, 500);
});
$(".accordionButtonone").click(function() {
$('html, body').animate({
scrollTop: $(this).nextAll('div .accordionContentone').offset().top
}, 500);
})
You have to put all that into a callback
$('.accordionContent').slideUp('normal', function(){
$(".accordionButtonone").click(function() {
$('html, body').animate({
scrollTop: $(this).nextAll('div .accordionContentone').offset().top
}, 500);
})
});

The solution is NOT elegant, but it works:
$(".accordionButton").click(function() {
$('html, body').animate({
scrollTop: $(this).offset().top
}, 10);
});
$(".accordionButtonone").click(function() {
$('html, body').scrollTop(458);
});

You are making it scroll down by using offset. remove the offset and it will stop scrolling down. also, instead of using individual selectors, why don't you write some code that utilizes jquery's 'this'
$(this)