// JavaScript Document
"use strict";
$(window).scroll(function(){
if($(window).scroll() > 100){
$("#scrollTop").fadeIn();
}
});
$(window).scroll(function(){
if($(window).scroll() < 100){
$("#scrollTop").fadeOut();
}
});
$(document).ready(function(){
$('.fa').click(function(){
$('html, body').animate({scrollTop : 0},1000);
return false;
});
});#scrollTop{
position: fixed;
bottom: 20px;
right: 20px;
cursor: pointer;
display: none;
background-color:#0D0155;
}
#scrollTop:after{
font-family: fontAwesome;
content:"\f102";
}
.fa {
padding: 20px;
width: 60px;
font-size: 15px!important;
text-align: center;
text-decoration: none;
margin: 5px 2px;
transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition-delay: 0.3s;
-webkit-transition-delay:0.3s;
background-image: -webkit-linear-gradient(20deg,#0D0155,#3A83F3);
background-image: -o-linear-gradient(20deg,#0D0155,#3A83F3);
background-image: linear-gradient(20deg,#0D0155,#3A83F3);
color: white;
margin-left: 10px;
}
.fa:hover {
background-image: -webkit-linear-gradient(left, #0D0155, #0D0155);
background-image: -o-linear-gradient(left, #0D0155, #0D0155);
background-image: linear-gradient(to right, #0D0155, #0D0155);
text-decoration: none;
color: #FFF;
}<div class="fa" id="scrollTop"></div>"use strict"
$(window).scroll(function(){
"use strict";
if($(window).scrollTop() > 300){
$('#scrollTop').fadeIn();
}
});
$(window).scroll(function(){
"use strict";
if($(window).scrollTop() < 300){
$('#scrollTop').fadeOut();
}
});
$(document).ready(function(){
"use strict";
$('#scrollTop').click(function(){
$('html, body').animate({scrollTop : 0},1000);
return false;
});
});Right, I'm working on implementing a fade-in button at the bottom of the screen that appears once the user scrolls past a specific distance from the top.
This button should smoothly scroll back to the top of the webpage when clicked.
Previously, this functionality was working as expected, but now it has suddenly stopped functioning properly and I find this unacceptable.
Attempts I've made to troubleshoot the issue include:
Adding the "use strict" directive at the beginning of the document.
Including the "use strict" directive within each of the code functions themselves.
Removing the "use strict" directive from each of the code functions.
Eliminating the "use strict" directive at the start of the document.
Trying switching from double quotes to single quotes.
Reverting from single quotes back to double quotes.
Embedding the JS directly into the webpage instead of linking to an external JS file.
Removing the embedded JS from the webpage and reverting to an external link in the head section.
Removing the "type:text.javascript" attribute from the script link in the head.
Reinstating the "type:text.javascript" attribute in the script link.
Testing with the ".fa" class in the JS code.
Using the "scrollTop" ID attribute for testing purposes.
The anticipated outcome was for the JavaScript to execute correctly based on the code instructions, but unfortunately, nothing happens. The button does not fade in, and clicking does not trigger any action.
Frankly speaking, I am frustrated with coding deciding not to function when it previously worked perfectly fine.
So why isn't it cooperating now?