Hi team,
I’m trying out the new scroll to top link added to the theme in the latest version and although it works perfectly, it hides itself to display:none; on mobile devices.
This is where I arguably need it most.
How can I override the javascript? I have tried CSS display !important styles but javascript writes the style directly to the element so I cant override it.
Cheers
Hey Jay,
Yep, the styling for the button only gets added when the viewport width is > 768px, so simply overriding the display property won’t do. I’ve already filed a bug report though so we can take a closer look. Thanks for the heads up! 
Ben
Hi Ben, yeah that’s a good idea.
OK so I noticed from the theme’s LESS files it ONLY applies the visibility & relevant css as it goes to medium devices which makes sense. I have got it to be able to display on mobiles now using display: block !important; and copying over the CSS to mobile breakwidth too.
However, now that it’s set to !important in my css, it means that on mobile it is ALWAYS visible, instead of the ability to show only after you scroll down the page 800.
I had a look into the theme.js file and found this function:
/**
* Go to Top
*
* @since 1.5
* @access private
* @method _toTop
*/
_toTop: function()
{
var win = $(window);
$('#fl-to-top').each(function(){
$(this).click(function(){
$('html,body').animate({ scrollTop: 0 }, 1000);
return false;
});
});
$(win).scroll(function() {
if(win.width() >= 768) {
var scroll = $(this).scrollTop();
if (scroll > 800) {
$('#fl-to-top').fadeIn();
} else {
$('#fl-to-top').fadeOut();
}
} else {
$('#fl-to-top').hide();
}
});
},
What I would really like to know - is what exactly do I put into my customizer-JS settings field to override the behaviour?
Am I correct in understanding that if I write something in there it should stop this functions from happening?
Hey Jay,
It was intentional. It is best practice because of small screen size of smartphones.
If you want to show it on all devices, I re write the code for you.
Download this file -> https://dl.dropboxusercontent.com/u/42506937/to_top_allways_enable.zip
Change theme.less file with less/theme.less
and
Change theme.js file with js/theme.js
Cheers.
Thanks Ozan,
Thanks for taking the time - I don’t really want to override any files, just write a snippet of JS and CSS instead. I’m jsut trying to figure out the syntax for my JS which will do it. I keep getting JS Syntax errors
(function($){
var win = $(window);
$(win).scroll(function() {
var scroll = $(this).scrollTop();
if (scroll > 200) {
$('#fl-to-top').fadeIn();
} else {
$('#fl-to-top').fadeOut();
}
});
})(jQuery);
This is what I’ve attempted so far, but it keeps fading in and out lots of times 
Hey Jay,
if (scroll > 200) means show the button when scroll 200px. It’ll not solve your problem.
Also styling of go top top button only appear when screen size is more than 768px.
Please add this snippet to Code > CSS Code in customizer
#fl-to-top {
background-color: #ccc;
background-color: rgba(0,0,0,.2);
position: fixed;
bottom: 15px;
right: 15px;
width: 44px;
height: 42px;
text-align: center;
z-index: 999999999;
}
#fl-to-top:hover {
background-color: rgba(0,0,0,.3);
}
#fl-to-top i {
position: absolute;
top: 12px;
left: 13px;
color: #fff;
font-size: 16px;
line-height: 16px;
}
and add this to Code > JavaScript Code in customizer
(function($){
$(window).scroll(function() {
var scroll = $(this).scrollTop();
if (scroll > 800) {
$('#fl-to-top').fadeIn();
} else {
$('#fl-to-top').fadeOut();
}
});
})(jQuery);
It’ll work but a buggy way.
On mobile when your visitor scroll, button will be hidden when stop button appears.
There is no way fix this bug without editing theme.less file.
You can fix it by deleting those lines from theme.less @ line 675:
$(win).scroll(function() {
if(win.width() >= 768) {
var scroll = $(this).scrollTop();
if (scroll > 800) {
$('#fl-to-top').fadeIn();
} else {
$('#fl-to-top').fadeOut();
}
} else {
$('#fl-to-top').hide();
}
});
Cheers.
[Content Hidden]
Jay, I edited my post, please check out again.
Thanks Ozan,
So as you can see it now works as you describe on mobiles. It hides as it is being scrolled then shows again as it stops. I’m okay with that behaviour.
However if you go to desktop now it has really strange behaviour and flashes in and out a number of times. It’s almost like it recognises the scroll event thousands of times and repeatedly does a ‘fade in’ which results in the item also fading out.
Sorry for the hassle - It would be much easier to simply replace the file in my child theme
Hey Jay,
If you using child theme, please simply replace theme.less and theme.js files with https://dl.dropboxusercontent.com/u/42506937/to_top_allways_enable.zip
This will solve your problem.
FYI,
We’ll consider to adding a setting to “Scroll To Top Button” for show all screen sizes in the next theme update.
Thanks Ozan,
What’s the estimated time frame for the next release? I may just push it back instead ^^
Hey Jay,
We’ll release maintenance patch in a few weeks.
Cheers!
Awesome stuff.
I have one more question. I managed to write the following function which I figured out was causing the ‘flashing’.
So basically it was checking if Scroll was greater than 800 and pinging thousands of times whenever you scrolled, and the fadeIn() didn’t double check if it was already visible or not.
So I’ve created a limitation so it will appear between scroll 100 and scroll 750.
(function($){
$(window).scroll(function() {
var scroll = $(this).scrollTop();
if (scroll > 100 && scroll < 750) {
console.log("test");
$('#fl-to-top').show();
}
});
})(jQuery);
It’s very simple and it IS working, but again the javascript in the default theme files is overriding it (hiding it if less than 800). Is there an equivalent of something like CSS’s ‘!important’ attribute which will make this particular function take priority over other functions?
Hey Jay,
The problem is if (scroll > 200 conflict with if (scroll > 800 from theme.js.
Just change if (scroll > 800 to if (scroll > 200 in theme.js or leave it 800 in custom JS snippet.