Develop Reference

jQuery scrollTop only works when DevTools is open in Edge

I have a weird problem... I'm just hoping someone will believe me.
I'm currently working with a platform called K2 where in a form I've injected some jQuery. The script is scrolling a list control to a specific element within that list and works without any problems in Chrome and in IE. But not in Edge (v16.16299), unless I have DevTools open.
This is the function. If I put an alert() before animate() I'm getting it, without having DevTools open... So I guess it has to do something with animate or scrollTop?
$(function() { jQuery.fn.scrollTo = function(elem) { $(this).animate({ scrollTop: $(this).scrollTop() - $(this).offset().top + $(elem).offset().top - 4 }, 500); return this; }; });
scrollTo is then called within a K2-rule):
$("#idOfParent").scrollTo("input[value='aValueImGetting'");
I'm clueless and the closest thing I've found is this, which didn't help me since I can't update Edge due to... stuff: Javascript in Edge only works with devtools open
However, the last comment about this being solved from an update is from 2016, and my Edge version is from mid 2017?

Reload page on back button press (mobile, safari)

so i've been looking around and i've found several questions which are all very similar to this with fixes however none have worked for me because I think they may be outdated.
This is my code:
$(document).ready(function() {
$('body').css('display', 'none');
$('body').fadeIn(5000);
$('.link').click(function(event) {
event.preventDefault();
newLocation = $(event.currentTarget).find('a').attr('href');
$('body').fadeOut(1000, function () { newpage(newLocation); });
});
function newpage(location) {
console.log(location);
window.location = location;
window.onunload = function(){};
}
});
Everything seems to work fine on desktop browsers however the issue is only on mobile. What im asking is how can I refresh the page on the click of the back button so the animations play each time a page is loaded and left.
You can see what I mean here - website

Haven't tested this on mobile but I know this works on my laptop browser.
<script>
$(document).ready(function(e) {
var $input = $('#refresh');
$input.val() == 'yes' ? location.reload(true) : $input.val('yes');
});
</script>
<input type="hidden" id="refresh" value="no">

Hiding jQueryUI tooltip when clicking on target="_blank" link

I'm using jQuery to show tooltips on every link on my page that has a 'details' attribute
$(function() {
$tooltip = $(document).tooltip({
show: false,
track: true,
items: "a[data-details]",
content: function() {
return $( this ).data('details');
}
});
});
This works very well. However, when the user clicks one of those links, the URL is opened in a new tab (using target="_blank"). The problem is that the tooltip is still open when the user gets back on the first tab.
Here's what I tried so far:
$('a[data-details]').on('click mousedown mouseup', function() { // this might be overkill
$(document).tooltip("close"); // Doesn't work at all
$('div[class^="ui-tooltip"]').remove(); // removes the tooltip onclick, but gets it back opened when returning on the tab
});
Is there a way to keep the tooltips closed when the new page is opened?
Thank you for your help.
Here's a fiddle illustrating the problem: https://jsfiddle.net/su4v757a/
Note: I'm using jQuery 1.12.4 with jQueryUI 1.12.1

This is probably a bug.
As far as I can tell this must be a bug.
And you could let them know over at https://bugs.jqueryui.com/report/10?P=tooltip
I notice that the .tooltip("close") doesn't work in the fiddle. However the tooltip listens to the "mouseleave"-event to close, and we can force that by $('a[data-details]').trigger("mouseleave");
If you try this out you will see that it do close, but pops up again:
$('a[data-details]').on('click mousedown mouseup', function() { // this might be overkill
$(this).trigger("mouseleave");
});
Hover and click the "me":
Coming back to the page notice that the tooltip has closed and come back again:
Workaround - possible solution
Since .hide()-ing an element triggers the "mouseleave"-event you could do something funky like hiding the link on click, and showing it just a moment later.
$('a[data-details]').click(function() {
var $this = $(this);
$this.hide();
setTimeout(function() {
$this.show()
}, 1);
});
Setting the timeout to 1 ms would not create any flickering of the link, making the hide/show unnoticeable for the user.
Works in Chrome. Try it here: https://jsfiddle.net/cyx6528e/1/
Good luck!

tooltip usually works on hover functionality, can you provide js fiddle for your problem

Chrome scrollTop strickt mode issue

I suddenly had the following stop working:
Html
<a id="scrollTop" href="#">Scroll</a>
jquery
$("#scrollTop").on("click", function(e){
e.preventDefault();
$('html, body').animate({scrollTop: 0}, 'slow');
});
If I check in console I get this message
body.scrollTop is deprecated in strict mode. Please use 'documentElement.scrollTop' if in strict mode and 'body.scrollTop' only if in quirks mode.
But I haven't changed anything so I don't get it. I did check on other SO questions but it still doesn't work and more importantly I don't understand why it sudden started doing this

I had overflow-x on body in css.
Shouldn't be using overflow on body when doing that (scrollTop). Removed it and page is working

jQuery Javascript scrollTop not working as expected on Chrome to restore scrollbar position

I'm using the following jQuery Javascript to save the scrollbar position before the unload event and reapply it again:
$(document).ready(function () {
document.documentElement.scrollTop = $.cookie("scroll") || 0;
});
window.onbeforeunload = function () {
$.cookie("scroll", document.documentElement.scrollTop, { expires: 7 });
}
Basically I have a series of links that refresh the page and I would like the browser to restore the scrollbar position. Note I cannot use AJAX in this instance. It works a treat in Firefox. In Chrome and Safari however it only works when the browser window is refreshed, and not when the link is clicked to refresh the page. It's as if clicking the link isn't being recognised as onbeforeunload.
I have tried to modify the code to set the scroll cookie using a click event as follows with no luck:
$(document).ready(function () {
document.documentElement.scrollTop = $.cookie("scroll") || 0;
});
$('a.lockscrollbar').click(function() {
$.cookie("scroll", document.documentElement.scrollTop, { expires: 7 });
}
FYI I'm using jQuery 1.4.2 with the jQuery cookie plugin.
Any ideas?

This is an older post but I was having the same issue with Chrome 20. Using jQuery 1.7.1 this worked for me:
$(window).on('load', function(){
$('html body').scrollTop(0);
});

Before Chrome 10 this use to work like a charm... now it seem to only work in Firefox (Anyone have tested in IE9 ?)
var y = $(window).scrollTop();
$('html, body').animate({scrollTop:(y + 50)}, 1000);

Scrolling the <body> in Chrome and Safari doesn't work very well, or possibly at all. I don't know why but I once had a similar problem and I fixed it by using a <div> nested inside the <body>.

This is the code I use (tho the site I'm working on is still in build stage, but this works):
$(document).ready(function(){
$(window).scroll(function(){
var posY = $(document).scrollTop();
$('#trigger').click(function(){
if($.browser.webkit){
$('body').stop().animate({scrollTop:0},'slow');
}else{
$('html').stop().animate({scrollTop:0},'slow');
}
});
});
});
Webkit won't scroll to the top when the object being scrolled is 'html', so first I check for browser type (and before you say it I know jQuery.support would be better - like I said still in build stage). Browsers other than webkit accept the 'html' selector, so I use that for all other browsers (annoyingly, using 'html' works in Opera but not Chrome, and using 'body' works in Chrome but not Opera...!).