Add Scroll Top Image

When the web page has scrolled down an offset distance show a scroll to top image.

When redesigning the VNTweb website, thinking about the longer article pages, I chose to add one of these.

Scrolling the page down shows on image in a fixed location. Clicking on this image shall scroll the page back to the top of the page, or a named div.

I wanted my scrolltop image to appear once the page had scrolled down by a measure.

Here’s what I used

 
$VNTweb(window).scroll(function(){ 
  if ($VNTweb(this).scrollTop() > 100) { 
    $VNTweb('#scroll').fadeIn(); 
  } else { 
    $VNTweb('#scroll').fadeOut(); 
  } 
});

Once the page has scrolled down by 100 pixels then the scroll image becomes visible.

And for the image onClick scroll action I used the scroll from my article JQuery Page Scroll on Load, a few weeks ago.

$VNTweb('#scroll-top').click(function(){ 
  $VNTweb("html, body").animate({ scrollTop: 0 }, 600); 
  return false; 
}); 

You may wish to experiment with the distance scrolled before showing the image. Perhaps 100 pixels is too soon.

Another idea would be to hide and show the image at different values.

For example show the scroll to top image when the page has scrolled down a distance of 400 pixels, but hide once more when the distance reaches 300.

If you are looking for suitable images take a look at Font Awesome or Glyphicons.