We Keep Coding

jQuery Links have to be clicked twice to scroll

I have a few links on my sidebar on my website. The links have the class sidebarelement. Everytime I click one of them I have to click twice to scroll to my content. After the first time nothing happens. I use jQuery.
$(".sidebarelement").on("click", function () {
var offset = $(':target').offset();
if (offset) {
var scrollto = offset.top - 158; // minus fixed header height
$('html, body').animate({scrollTop: scrollto});
}
});
How can I fix this?

For everyone else who had this problem I got a solution.
The idea is to get the href attribute from the link which has been clicked and animate (scroll) to that place. Also note that e.preventDefault() prevents the link to jump to his place.
Here is my code snippet.
$(document).ready(function () {
$('.sidebarelement').on("click", function () {
var href = $(this).attr('href');
$('html, body').animate({
scrollTop: $(href).offset().top - document.getElementById('navDiv').clientHeight // minus fixed header height
}, 'slow');
e.preventDefault();
});
});

Scroll to top of element on short page

I am trying to scroll my page (on click) to the top of en element. The problem here is that my page is to short to scroll to the top of the element. IS this possible?
Here's my code
$('.x-class').on('click', function(e) {
moveWindowTo($('.yclass').eq(0));
});
function moveWindowTo($target) {
$('body,html').animate({ scrollTop: $target.offset().top }, 'slow');
}

This code uses .parent() to scroll up to the top of the containing div:
$('.x-class').on('click', function(e) {
moveWindowTo($(this).eq(0));
});
function moveWindowTo(target) {
$('body,html').animate({
scrollTop: target.parent().offset().top
}, 'slow');
}
Here is a working jsFiddle. Scrolling down and clicking the red box will scroll it to the top of the containing div.

Smooth Scroll Jumps Rather than Scroll

I have used Smooth Scroll Plugin From CSS TRICKS,
Its working great but for only 2 ancoher links and not for another one, please see the demo here,
LIVE DEMO
Its working Great for industries and Pricing, but on testimonial its just jump to the position and also the fixed nav cut off the section too.
<script>
$(document).ready(function () {
$('a[href^="#"]').on('click', function (e) {
e.preventDefault();
var target = this.hash,
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top - 130 // - 130px (nav-height)
}, 900, 'swing', function () {
// Replace this with something that can be easily parsed and used by your code
window.location.hash = '3' + target;
});
});
});
</script>

Here i've made a jsfiddle,
jsfiddle.net/Thq62/
and it's working fine just added a proper id and hash to the links

Scroll to page depending on button that is clicked

Can anyone explain to me how I can use the jquery scroll-to to make the buttons on the yellow menu scroll to their corresponding sections (i.e distribution to the pink block)
This is my code: http://jsfiddle.net/VXkW5/5/
I think its something like this:
$(".nav").click(function () {
$('html, body').animate({
scrollTop: $(".section").offset().top + $(".section").height()
}, 500);
});
But I dont know how to relate it to it's relevant section based on the link that was clicked.

Working Demo
First of all, ID need to be unique in the page. I see both as well as uses same ID
so i have made change & Just add the corresponding div id to the href tag, it will take to that particular div on click
posting
distribution
applicantions
In terms of jQuery:
$(".nav").click(function (e) {
e.preventDefault();
var divId = $(this).attr('href');
$('html, body').animate({
scrollTop: $(divId).offset().top;
}, 500);
});

You could have a link like
Click to jump to section 1
And a section like
<div id="section1">
<p>Section 1 content</p>
</div>
And handle the scroll to like so
<script type="text/javascript">
$(".nav").click(function (event) {
event.stopPropagation();
var theHref = $(this).attr('href');
$('html, body').animate({
scrollTop: $(theHref).offset().top + $(".section").height()
}, 500);
});
</script>

Scroll to top and animated scroll to #page link conflict

So, I'm quite new to javascript and building a site where I'm trying to have animated scrolls on the page.
To enable animated scroll to a link I'm using this code:
jQuery(document).ready(function ($) {
$('a[href^="#"]').on('click',function (e) {
e.preventDefault();
var target = this.hash,
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 900, 'swing', function () {
window.location.hash = target;
});
});
})();
To scroll to the top of the page I am using this code.
//<-- scroll top -->
var $top = jQuery.noConflict();
$top("#scroll-top").hide();
// fade in #scroll-top
$top(window).scroll(function () {
if ($top(this).scrollTop() > 150) {
$top('#scroll-top').fadeIn();
} else {
$top('#scroll-top').fadeOut();
}
});
// scroll body to 0px on click
$top('#scroll-top a').click(function () {
$top('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
They both work fine independently, but not together.
Can anybody help me find out why they conflict, and how to solve the conflict?

So, this is how I fixed my issue:
I removed the conflicting code " // scroll body to 0px on click " and instead use the animated scroll to anchor link to animate both functions, with a placed on top of the page as well.
jQuery(document).ready(function ($) {
$('a[href^="#"]').on('click',function (e) {
e.preventDefault();
var target = this.hash,
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 900, 'swing', function () {
window.location.hash = target;
});
});
})();
I works fine, but I am missing only one feature, that the javascript recognises internal links that start with anything else than #. Right now it doesn't recognise for example this link http://julebord.bedriftsdesign.no/julebord.html#julemeny. It only works if I use this: #julemeny