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

Very scrolls on firefox how to fix it?

$('.event-in > a').click(function(){
if ( $(this).hasClass('active') ){
return;
}
$('html, body').animate({
scrollTop: $(this).offset().top + $(this).height()+ 200// + 591
}, 500);
});
On chrome it works fine. scrolls as it should to the specified position (200) but here firefox it really goes up very much somewhere at pixels 200 for sure, why is this happening?

Create JS chrome snippet to auto scroll page up and down in infinite loop

I need to show content of Jira dashboard on screen and scroll it up and down automaticly inside infinite loop.
I tried to create Chrome Snippet but for/while loops seems not work.
function scroll(speed) {
$('html, #ghx-pool').animate({ scrollTop: $(document).height() - $(window).height() }, speed, function() {
$(this).animate({ scrollTop: $(document).height() }, speed);
});
}
while(true){
setInterval(scroll(25000), 10);
}

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

click the ''Back to Top" button (scrollTop) multiple times issue

I have noticed that if i click the ''Back to Top" button multiple times and then you try to scroll down it causes the window to keep scrolling back to the top. Any idea how to stop this happening anyone?
my code is:
Scroll
<script type="text/javascript">
$(document).ready(function(){
$(window).scroll(function(){
$("html, body").stop();
if ($(this).scrollTop() > 100) {
$('.scrollup').fadeIn();
} else {
$('.scrollup').fadeOut();
}
});
$.clicked = false;
if ($.clicked == false){
$('.scrollup').click(function(){
$.clicked = true;
$("html, body").stop().animate({ scrollTop: 0 }, 600);
return false;
});
}
});
</script>

As you said you click multiple time so event will be fired mulitple times so you need to stop animation function,
So edit your code as below,
$("html, body").stop().animate(
--------------^^^^^^^^----
OR edit code for scroll
$(window).scroll(function(){
$("html, body").stop();

$(function() {
$('button').hide();
$(window).scroll(function() {
if ($(this).scrollTop() >= 50) { // If page is scrolled more than 50px
$('#return-to-top').fadeIn(200); // Fade in the arrow
} else {
$('#return-to-top').fadeOut(200); // Else fade out the arrow
}
});
$('#return-to-top').click(function() { // When arrow is clicked
$('body,html').animate({
scrollTop: 0 // Scroll to top of body
}, 500);
});
});
This should work.

I had a similiar issue.
I just solved it with a simple check:
$('.scrollup').click(function(){
if ($(document).scrollTop() != 0) {
$("html, body").animate({ scrollTop: 0 }, 600);
}
return false;
});
The problem, as already mentioned, is the click event firing multiple times. Because handling the event itself didn't work for me, I just tried to check if the current scroll value/position is already where I want it to be, et voilà: The weird behaviour vanished! :)