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

jQuery selector attribute value white space problem

A couple weeks ago, i've been using this code to make the scroll event into a specific page, and was working very good.
But, yesterday, the client asked to change de attribute name from "Ouro" to "Ouro Envelhecido".
The first functional code was like that:
jQuery(document).ready(function($) {
$("[data-title=Ouro]").click(function() {
$('html, body').animate({
scrollTop: $(".custom-product-page").offset().top - 100
}, 1000);
})
And after the attribute name change, we just added the " Envelhecido", like this:
jQuery(document).ready(function($) {
$("[data-title=Ouro Envelhecido]").click(function() {
$('html, body').animate({
scrollTop: $(".custom-product-page").offset().top - 100
}, 1000);
})
And the code stop working. At the console, I got the warning saying Uncaught Error: Syntax error, unrecognized expression: [data-title=Ouro Envelhecido], but, the attribute name is 100% correct.
imgs:
https://prnt.sc/13py6mv
https://prnt.sc/13py8zy
Any help would be appreciated!

You should use quotes to wrap your data-title value
jQuery(document).ready(function($) {
$("[data-title='Ouro Envelhecido']").click(function() {
$('html, body').animate({
scrollTop: $(".custom-product-page").offset().top - 100
}, 1000);
})
})

Scroll to bottom not working in IE or FF, only Chrome

If you press the "Profile" button in the top right, it will scroll to the bottom of the page in Chrome but not in FF or IE. I'm not sure why not. Is it because JS is being blocked?
$("#profile").click(function() {
$('body').animate({
scrollTop: $(".anchor-point").offset().top
}, 2000);
});
http://imdarrien.com/

You need to use $('html, body') instead of $('body') :
$("#profile").click(function() {
$('html, body').animate({
scrollTop: $(".anchor-point").offset().top
}, 2000);
});

How to call reload after animation in JQuery

I am building a news feed style page that will automatically scroll to the bottom, then wait and refresh the page and repeat the process.
The automatic reload is not working at the moment, and it is starting to bug me.
any help is greatly appreciated.
The Scrolling part works great
My code currently
<script language="javascript" type="text/javascript">
function scrolll() {
time = $('.message').length*3000;
$("html, body").animate({ scrollTop: 0 }, 0);
$("html, body").animate({ scrollTop: $(document).height() }, time,0, function() {location.reload; });
;
}
</script>

you can use
location.reload();
or
window.location.href = window.location.href;
but I think your problem with time,0
$("html, body").animate({ scrollTop: $(document).height() }, time, function() {location.reload(); });
and if I understood you can use setTimeout()
$("html, body").animate({ scrollTop: $(document).height() }, 100, function() {
setTimeout(function() {
location.reload();
}, time)
});
DEMO

First, try changing
location.reload;
to
location.reload(true);
(which will also avoid using the page cache on reload (ref)).
Next, consider the animate signature:
.animate( properties [, duration ] [, easing ] [, complete ] )
In your animation you are passing 0 as the easing name
.animate({...}, time, 0, function() ...
which will prevent the animation from starting. Either omit this altogether, or pass in a valid easing name such as "linear". See here for easing function names if you are interested.

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)