1

Trying to add a "scroll to top" button to fade in when I scroll down the webpage. Doesn't want to know, I've applied this exactly another webpage and works fine, on this web page, it just doesn't want to know. What am I doing wrong?

The script & style sheets are separate & attached in the head section, they do not make up the document body of the webpage.

Long time, 

<!doctype html>
<html> 
<head>
<script type="text/javascript" src="../scripts/AltScript.js"></script>
<script type="text/javascript"src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link href="../styles/alternate-styling-sheet.css" rel="stylesheet" type="text/css">
<head>
<body>
<div id="scroll-to-top-button">
 <a href="#">Top<i class="fa fa-caret-up" aria-hidden="true"></i></a>
</div>
</body>
<html/>
/----------------------------------/
<script>
$(window).scroll(function(){
if($(this).scrollTop() > 150){
    $('#scroll-to-top-button').slideDown();
    }
});
</script>
/---------------------------------------/
<style>
#scroll-to-top-button{
right:20px;
bottom:20px;
display:none;
background-color:#3A83F3;
position:fixed;
border-style:none;
border-radius:5px;
width:100px;
z-index:99999999999;
}
#scroll-to-top-button a{
padding:10px;
display:block;
color:white;
font-size:17px;
text-decoration:none;
}
#scroll-to-top-button a:hover{
background-color:#81AFED;
border-radius:5px;
}
#scroll-to-top-button a i{
padding-left:10px;
float:right;
}
</style>

4 Answers4

0

If the script is part of the js you are calling first, that may be your problem. You have to load jquery first. If you run developer tools, you will probably see in the console that it fails at "$(window)".

Randolph Abeyta
  • 424
  • 3
  • 8
0

First of all move jquery libs to the top of custom scripts 

<script type="text/javascript"src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="../scripts/AltScript.js"></script>

And for fade in using js you can follow this links. It is well explained -

Fade In on Scroll Down, Fade Out on Scroll Up

Community
  • 1
  • 1
pradeep1991singh
  • 8,185
  • 4
  • 21
  • 31
  • No, this is absolutely stupid, it worked one and now its "decided" its not going to bother, this is the code I used previously, and this is the code that will work again, because its a computer & not a disobedient child! $(window).scroll(function(){ if($(this).scrollTop() > 150){ $('#scroll-to-top-button').slideUp(); } }); –  Jun 02 '16 at 19:48
0

Since I answered first, I will reply to your comment to the other answer that is similar to mine:

It isn't stupid, as javascript - unless dynamically loaded - loads in the order listed. Since jquery is just a javascript library, it has to load before you can call any jquery functions.

It is possible that your other code had inherited jquery some other way. It would be hard to tell without context.

Randolph Abeyta
  • 424
  • 3
  • 8
0
  1. Load your jQuery library script above your personal script by putting it on the line above it

  2. Try using this:

    <script> $(document).ready(function(){ $(window).scroll(function(){ if($(this).scrollTop() > 150){ $('#scroll-to-top-button').slideDown(); }}); }); </script>

But it does appear that DaniP's fiddle is working correctly: https://jsfiddle.net/by49ph5s/

Trob Frank
  • 363
  • 3
  • 11