Develop Reference

Using two ScrollTop() functions in jQuery?

I'm building a single page website which uses smooth scrolling to anchors for navigation. I'm also trying to add a 'back to the top' button but can't seem to get the animation working (clicking the button doesn't do anything). I believe it's because I'm using two scrollTop functions. Is this correct and how can I solve this?
// Smooth scrolling for page anchors
$(document).ready(function () {
$('a[href^="#"]').on('click', function (e) {
e.preventDefault();
var target = this.hash;
var $target = $(target);
$('html, body').animate({
'scrollTop': $target.offset().top
}, 1000, 'swing');
});
});
// Sticky back to top button
$(document).ready(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 600) {
$('.go-top').fadeIn("500");
} else {
$('.go-top').fadeOut("500");
}
});
$('.go-top').click(function () {
$('html, body').animate({
scrollTop: 0
}, 800);
return false;
});
});

Found the solution - I had to removed the second $(document).ready(function () { line of code.

JQuery scroll animation flashes home screen for split second

I've coded a menu using bootstrap that scrolls to different parts of my page using JQuery, but for a split second before it scrolls the home screen flashes up. I don't know why it happens or how to stop it.
$("#butHome").click(function() {
$(".nav li").removeClass("active");
$(this).addClass("active");
$('html, body').animate({
scrollTop: $("#home").offset().top
}, 300);
});
$("#but1").click(function() {
$(".nav li").removeClass("active");
$(this).addClass("active");
$('html, body').animate({
scrollTop: $("#section1").offset().top
}, 300);
});
$("#but2").click(function() {
$(".nav li").removeClass("active");
$(this).addClass("active");
$('html, body').animate({
scrollTop: $("#section2").offset().top
}, 300);
});
$("#but3").click(function() {
$(".nav li").removeClass("active");
$(this).addClass("active");
$('html, body').animate({
scrollTop: $("#section3").offset().top
}, 300);
});
$("#but4").click(function() {
$(".nav li").removeClass("active");
$(this).addClass("active");
$('html, body').animate({
scrollTop: $("#section4").offset().top
}, 300);
});

Probably because the anchor link makes the page scroll to the top of the page before the animation starts. You may prevent this default browser behaviour by adding the following within your handler:
$('.upp').click(function(e){
e.preventDefault();
$.scrollTo( '#up', 800 );
});
COPIED

Toggle div after arriving from anchor link

My goal is to create anchor link with smooth scrolling to its destination and after it reaches it, toggle class to open accordion.
I have a hard time achieving a working result. Scroll code is here:
var $root = $('html, body');
$('.calendar a').click(function() {
$root.animate({
scrollTop: $( $.attr(this, 'href') ).offset().top
}, 500);
return false;
});
I have no hash in my url.
How to include toggle in this scroll code?
Thanks!

There is an "completed" function callback you can stick at the end of the animation, like so:
var $root = $('html, body');
$('.calendar a').click(function() {
$root.animate({
scrollTop: $( $.attr(this, 'href') ).offset().top
}, 500, function() {
//DO YOUR TOGGLE HERE
$('#target').toggleClass('myClass')
});
return false;
});

You can simply wait for the animate to complete using a jQuery promise and always. This works better than the animation callbacks (which do not fire if you are already at the final position)
JSFiddle http://jsfiddle.net/fb6yuf9k/1/
e.g.
var $root = $('html, body');
$('.calendar a').click(function () {
var $target = $($.attr(this, 'href'));
$root.animate({
scrollTop: $target.offset().top
}, 500).promise().always(function(){
$target.toggle();
});
return false;
});
For the specific website provided in comment, you want to toggle the element with toggle-content beneath the target element:
e.g.
var $root = $('html, body');
$('.calendar a').click(function () {
var $target = $($.attr(this, 'href'));
$root.animate({
scrollTop: $target.offset().top
}, 500).promise().always(function(){
$target.find('.toggle-content').toggle(); // or toggleClass etc
});
return false;
});

jump to top of div once expanded

I have the following code
<ul id="menu">
<li class="newsPara">
Initial copy here
Read more»
<ul class="accordianUl" style="display: none">
<li>
content hidden here
</li>
</ul>
</li>
</ul>
when a user clicks the read more the sub ul expands. using the following code
$('#menu li a').click(function () {
$('#menu li a').show();
$(this).hide();
var checkElement = $(this).next('ul');
if (checkElement.is(':visible')) {
return false;
}
if (!checkElement.is(':visible')) {
$('#menu ul:visible').slideUp('normal');
checkElement.slideDown('normal');
$('html, body').animate({ scrollTop: $(this).parent('.accordianUl').position().top }, 'slow');
return false;
}
});
I want once the sub ul has expanded to jump to the top of it ive tried this
$('html, body').animate({ scrollTop: $(this).parent('.accordianUl').position().top }, 'slow');
but it doesnt seem to work
can anyone help
thanks

your $(this).parent() is returning null as it has not got an accordianUl in it. $(this) refers to the current element calling the function, see this fiddle:
http://jsfiddle.net/jFIT/wfeWW/
$('#menu li a').click(function () {
$('#menu li a').show();
$(this).hide();
$this = $(this); //KEEP THAT ELEMENT JUST INCASE
console.log($this); //IT IS THE LI > A
var checkElement = $(this).next('ul');
if (checkElement.is(':visible')) {
return false;
}
if (!checkElement.is(':visible')) {
$('#menu ul:visible').slideUp('normal');
checkElement.slideDown('normal');
$('html, body').animate({ scrollTop: checkElement.position().top }, 'slow');
return false;
}
});

jquery issues when changing active navigation class on scroll and on click

I'm doing a single page where navigation .active class should change both on scroll and on click. I'm also changing class of header when scrolling down (".large" and ".small"), but this two scripts somehow don't work with each other.
For header resizing I'm doing this:
$(document).on("scroll",function(){
if($(document).scrollTop()>200){
$('header').removeClass('large').addClass('small');
} else{
$('header').removeClass('small').addClass('large');
}
});
For change active class I'm doing this:
$(document).ready(function () {
$(document).on("scroll", onScroll);
//smoothscroll
$('a[href^="#"]').on('click', function (e) {
e.preventDefault();
$(document).off("scroll");
$('a').each(function () {
$(this).removeClass('active');
})
$(this).addClass('active');
var target = this.hash,
menu = target;
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top+2
}, 500, 'swing', function () {
window.location.hash = target;
$(document).on("scroll", onScroll);
});
});
});
function onScroll(event){
var scrollPos = $(document).scrollTop();
$('#top-menu a').each(function () {
var currLink = $(this);
var refElement = $(currLink.attr("href"));
if (refElement.position().top <= scrollPos && refElement.
position().top + refElement.height() > scrollPos) {
$('#top-menu ul li a').removeClass("active");
currLink.addClass("active");
}
else{
currLink.removeClass("active");
}
});
}
This works perfectly when scrolling, but clicking on a top nav link just crashes "header" function and it doesn't resize anymore. Can anyone see what's the problem is?

As f00bar mentioned, $(document).off("scroll"); removes the eventhandler. The scroll event wont be fired anymore. so your top code wont run after a click.