Question

I have a div that appears when a user scrolls down a page (you click it and it sends you back to the top of the page). Currently it just fades in and out, but I want it to slide in from the right hand side of the page.

Here is my current code:

Jquery:

<div class="toTop">
Back to the top
</div>
<script>
  $(window).scroll(function() {
    if ($(this).scrollTop()) {
        $('.toTop').fadeIn();
    } else {
        $('.toTop').fadeOut();
    }
});
</script>

CSS:

.toTop {
    padding: 10px;
    background: rgb(55,161,222);
    color: #fff;
    position: fixed;
    bottom: 50%;
    right: 0px;
    display: none;
    z-index:1000;
    text-transform:uppercase;
    font-weight:600;
}

You can also see what I’m doing here:
http://www.samskirrow.com/client-hope

Answer 1

Get rid of the display:none.

Set right:-200px and use .animate({ right: 0px }) instead of .fadeIn() and .animate({ right: -200px }) instead of fadeOut().

Change your if statement to if ($(this).scrollTop() > 100). This is because the scrollTop() function returns the current scroll position as a number of pixels from the top.