How to replace “back to top” button with an image and have it sliding onto/off the page rather than fading in/out

Question

I'm new at this and trying to duplicate a "back to top" effect that I found on another site here . You can see their "back to top" image slides out from the bottom right side of the screen rather than fade in when the user scrolls down to a particular point. I also want to replace the button I have with an image. I've added the image src to the html but it's obviously not correct. Help is greatly appreciated.

    <a href="javascript:void(0);" id="scroll" title="Scroll to Top" <img src="images/logo_bluebird_90_cc.png" style="display: none;">Top<span></span></a>

#scroll {
  position:fixed;
  right:10px;
  bottom:10px;
  cursor:pointer;
  width:50px;
  height:50px;
  background-color:#3498db;
  text-indent:-9999px;
  display:none;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;
}
#scroll span {
  position:absolute;
  top:50%;
  left:50%;
  margin-left:-8px;
  margin-top:-12px;
  height:0;
  width:0;
  border:8px solid transparent;
  border-bottom-color:#ffffff
}
#scroll:hover {
  background-color:#e74c3c;
  opacity:1;
  filter:"alpha(opacity=100)";
  -ms-filter:"alpha(opacity=100)";
}

$(document).ready(function(){
    $(window).scroll(function(){
        if($(this).scrollTop() > 300){
            $('#scroll').fadeIn();
        }else{
            $('#scroll').fadeOut();
        }
    });
    $('#scroll').click(function(){
        $("html, body").animate({ scrollTop: 0 }, 600);
        return false;
    });
});

Answer 1

There are a few errors in your setup here, mainly in your markup of the anchor. In fact, this does not need to be an anchor at all since you are already using jquery to move your position on click. I've removed all unnecessary code from what you have. Here is a bare bones example of what you want:

 $(document).ready(function(){ $(window).scroll(function(){ if($(this).scrollTop() > 300){ $('#scroll').css("right","10px"); }else{ $('#scroll').css("right","-140px"); } }); $('#scroll').click(function(){ $("html, body").animate({ scrollTop: 0 }, 600); return false; }); }); 

 section { height:1200px; } #scroll { position:fixed; right:-140px; bottom:10px; width:100px; height:100px; opacity:.7; -webkit-transition:all .4s ease; -moz-transition:all .4s ease; -ms-transition:all .4s ease; -o-transition:all .4s ease; transition:all .4s ease; } #scroll:hover { opacity:1; cursor:pointer; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <section> <img id="scroll" src="https://via.placeholder.com/150"> </section> 

Basically, the image tag is just hidden off screen with a fixed position of right:-140px . The jquery triggers a change in this position to right:10px at your defined breakpoint, and then back again above the breakpoint. Since the jQuery is moving the scroll position on click, there is no need for an a tag here. The section tag is just for the purpose of this example to create scrollable height on the page.