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

jQuery scrollTop troubles

I'm writing a quiz web ap with an opening heading and then 10 questions that follow it. The div of the opening and the div of each question are all siblings, so I traverse the page by passing current.nextSibling and current.previousSibling to whatever functions I'm using.
Right now I'm trying to create a smooth scroll with jQuery through its 'animate' and 'scrollTop' methods, but it's not working. Does anyone have any thoughts on this? Code attached here, link to fiddle here: https://jsfiddle.net/fjydnc9m/1/
var main = function () {
var root = $('html, body');
var current = document.getElementById("opening");
$('.upButton').click(function () {
$('html, body').animate({ scrollTop:$(current.previousSibling).offset().top}, 2000);
current = current.previousSibling;
});
$('.downButton').click(function() {
$('html, body').animate({ scrollTop: $(current.nextSibling).offset().top}, 2000);
current = current.nextSibling;
});
}
$(document).ready(main);

You've been trying to use jQuery .offset() on a regular HTML DOM element.
See this updated version of the fiddle:
https://jsfiddle.net/fjydnc9m/12/
What I did is to get the prev and next sibling via jQuery and use .offset() on that.
Note that you'll also have to account for the cases where current is the first or last wrapper, or some strange scrolling will take place. You can do this by checking if the length of prevSibling or nextSibling is > 0 before scrolling.

If you log the current variable, you find out that there is a #text sibling that is assigned to the current variable.
Check out this fiddle:
https://jsfiddle.net/fjydnc9m/13/
You can see that I assigned the current variable twice PRIOR to using it in the scrollTop function:
var main = function() {
var root = $('html, body');
var current = document.getElementById("opening");
$('.upButton').click(function() {
current = current.previousSibling;
current = current.previousSibling;
$('html, body').animate({
scrollTop: $(current).offset().top
}, 2000);
console.log(current);
});
$('.downButton').click(function() {
current = current.nextSibling;
current = current.nextSibling;
$('html, body').animate({
scrollTop: $(current).offset().top
}, 2000);
console.log(current);
});
}
$(document).ready(main);
Note that I'm logging the current variable. Remove one of the current assignments and see what the log shows (you will see what's going on).

scrollTo a div once a button is clicked?

I'm trying to get the page to scroll to #news .section-wrap when .paging-navigation a is clicked. I tried inserting the line (as seen below) but couldn't get it to work. Where am I going wrong?
$('#article-list').on('click', '.paging-navigation a', function(e){
e.preventDefault();
var link = $(this).attr('href');
$('#article-list').scrollTo('#news .section-wrap'); // this is the line I added
$('#article-list').fadeOut(500, function(){
$(this).load(link + ' #article-list', function() {
$(this).find('#article-list > *').unwrap().end().fadeIn(500);
});
});
});

You will need to animate html and body and point to the selector within the jQuery animate function. Try this:
$('html, body').animate({
scrollTop: $('#news .section-wrap').offset().top
}, 2000);

Try something like this:
$(".paging-navigation a").click(function(){
$('html, body').animate({
scrollTop: $("#news .section-wrap").offset().top
}, 500);
});
You might need to alter something in this code, either timing or some bug since i could not test it currently.
Hope it is helpful.

scrollTo() is not a native jQuery method. You can use a third part plugin like http://lions-mark.com/jquery/scrollTo/ or http://demos.flesler.com/jquery/scrollTo/ .
As answered on jQuery scroll to element you can also make the page scroll to the target position, like this:
$("#button").click(function() {
$('html, body').animate({
scrollTop: $("#elementtoScrollToID").offset().top
}, 2000);
});

Wait until a javascript function has finished before carrying out more

i have expandable headings that when clicked, show content.
I use a scrollTo method to scroll to the current clicked div to make sure its always in the screen view without the user scrolling.
However, where i currently use fadeIn / Out it looks messy as items are being faded in / out at the same time the page scrolling.
Is there a way i can only fade in / out the content when the scrollTo Has finished? e.g.:
Currently:
$(document).on('click','.headingHelp',function(){
$('html,body').animate({ scrollTop: $(this).offset().top }, 'slow');
$('.infoHelp').fadeOut();
$('.headingHelp_sel').attr('class', 'headingHelp');
$(this).next('.infoHelp').fadeIn();
$(this).attr('class', 'headingHelp_sel');
});
However what i want:
function scrollToDiv() {
$('html,body').animate({ scrollTop: $(this).offset().top }, 'slow');
}
$(document).on('click','.headingHelp',function(){
scrollToDiv() {
// ONLY DO THIS ONCE FINISHED SCROLLING
$('.infoHelp').fadeOut();
$('.headingHelp_sel').attr('class', 'headingHelp');
$(this).next('.infoHelp').fadeIn();
$(this).attr('class', 'headingHelp_sel');
}
});

You can use a callback:
$('html,body').animate({scrollTop: $(this).offset().top},'slow',function(){
//all the code you want to execute later goes here
});

If I recall correctly, you can make use of animate's promise:
function scrollToDiv() {
return $('html,body')
.animate({ scrollTop: $(this).offset().top }, 'slow').promise();
}
Use it like this:
scrollToDiv().done(function(){
$('.infoHelp').fadeOut();
$('.headingHelp_sel').attr('class', 'headingHelp');
$(this).next('.infoHelp').fadeIn();
$(this).attr('class', 'headingHelp_sel');
});

Using loop to scroll through divs

I've made a single page website, with with each div taking up 100% of the page.
At the moment I have some code that takes the user down the page, one div at a time.
$(".box1").click(function(e){
$('html, body').animate({scrollTop:$('.box2').offset().top }, 'slow');
});
$(".box2").click(function(e){
$('html, body').animate({scrollTop:$('.box3').offset().top}, 'slow');
});
$(".box3").click(function(e){
$('html, body').animate({scrollTop:$('.box4').offset().top}, 'slow');
});
$(".box4").click(function(e){
$('html, body').animate({scrollTop:$('.box5').offset().top}, 'slow');
});
Rather than having the user click different divs (box1, box2, etc) each time, can I let the user click the same div (.arrow) every time?
I have attempted this, with the user clicking .arrow to go through the loop:
var boxes = ["box1", "box2", "box3", "box4"];
for (i = 1; i > boxes.length; i++) {
$(".arrow")click(function(e){
$('html, body').animate({scrollTop:$(boxes[i]).offset().top}, 'slow');
});
}
This however is unresponsive, and won't scroll at all. Does anyone know what is wrong with this loop?

Only have one listener on .arrow which has some logic to decide where to go
(function enableArrow() {
var i = 1; // initial box
$(".arrow").click(function (e) {
i = i % 5 + 1; // (0 to 4) + 1 => 1 to 5
$('html, body').animate(
{scrollTop: $('.box'+i).offset().top},
'slow'
);
});
}());

Paul S. is right. What you attempted to do was assigning multiple click handlers to one .arrow element.
Paul S. suggests to define an i variable which will be visible to function (e) closure and will be modified each time you call the closure.

Try Changing like this.Hope this works.
var boxes = [".box1", ".box2", ".box3", ".box4"];
for (i = 0; i < boxes.length; i++) {
$(".arrow")click(function(e){
$('html, body').animate({scrollTop:$(boxes[i]).offset().top}, 'slow');
});
}

Rather than having a click handler per div, why not use event delegation?
$(document).on('click', '.box', function(event) {
$('html, body').animate({
scrollTop: $(event.target).offset().top
}, 'slow');
});
This way you'll only have a single event handler and the event will carry the div that you clicked on the target.