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.

Scroll Page on Page Load

On loading a web page scroll to the top of a form.

I had a web page with a form, part of a sequence of pages. Rather than the user scrolling down to the start of the form, I scrolled the page to the start of the form on page load.

Or more specifically to scroll to just above the top of the form on page load. Giving a degree of orientation reference within the page.

Above the form I added a div with an id:

<div id=”FormTop”></div>

Within the header (or separate JavaScript file if preferred) add the entry to scroll the page.

$(document).ready(function(){
  $('html, body').animate({scrollTop: $('#FormTop').offset().top}, 'slow');
});

Shown above is the animation, associated with either html or body. Here the scrollTop function moves the page to the FormTop ident, at a speed set as slow. Once the page has completed loading and is ready.

Perhaps the scroll isn’t to your liking. Both the speed and the flow (easing) of the scroll can be changed.

Other speeds can be used, try experimenting with these (in milliseconds):

$(‘html, body’).animate({scrollTop: $(‘#FormTop’).offset().top}, ‘500’);

The easing effects used for the animation can also be added, for example:

$(‘html, body’).animate({scrollTop: $(‘#FormTop’).offset().top}, ‘slow’, ‘swing’);

Linear is an alternative. This specifies how the path of the animation flows. There are more available by incorporating the jQuery UI script.

No doubt when you implement this you’ll add the single action line along with the rest of your items within $(document).ready(function(), not give its own distinct wrapper.

References

https://api.jquery.com/animate/

https://www.w3schools.com/jquery/eff_animate.asp

https://jqueryui.com/easing/

 

jQuery Scroll to Page Top

For a long web page it can be nice for your visitor to click on an icon and for the page to scroll back to the top.

None of that frantic skipping of the fingers on a small phone screen!

For a web page with lots of content, it may be helpful to your visitors to add a scroll to page top text and/or icon.

This can be implemented using jQuery.

An icon placed at the bottom of the page content, or the end of sections of text, can action a return to page top by calling a simple piece of jQuery.

For a recent project I chose to use one of the glyphicons as my up arrow at the bottom the page.

Here’s the arrow icon in the footer of the page

<a href=”javascript:void(0);” id=”scroll-top” title=”Scroll to Top” style=”display: none;”>
<span class=”glyphicon glyphicon-circle-arrow-up”></span>
</a>

As an addition to this you may wish to keep the icon hidden, showing it only when the page view reaches the bottom.

As can be seen in the above example its hidden initially.

And here’s the jQuery scroll top

$VNTweb(window).scroll(function(){ 
    if ($VNTweb(this).scrollTop() > 100) { 
        $VNTweb('#scroll-top').fadeIn(); 
    } else { 
        $VNTweb('#scroll-top').fadeOut(); 
    }     
    var p=$VNTweb(".puzzle-piece-tile").position();
    if($VNTweb(this).scrollTop() > p.top+100 && !frontpagetileOnce){
        frontpagetile();
    }
}); 
$VNTweb('#scroll-top').click(function(){ 
    $VNTweb("html, body").animate({ scrollTop: 0 }, 600); 
    return false; 
}); 

To avoid conflict I use $VNTweb in my jQuery, declared using:

var $VNTweb = jQuery.noConflict();

As the screen nears the target area the scroll to icon fades into view.

I had looked through the arrow icons available in font awesome but didn’t find what I wanted to use on this occasion. I chose to use one from Glyphicons. I added a reference to the set in the top of the CSS file:

@font-face {font-family: glyphicons;src: url('../fonts/glyphicons-halflings-regular.otf') format('truetype'),url('../fonts/glyphicons-halflings-regular.eot') format('eot'),url('../fonts/glyphicons-halflings-regular.woff') format('woff');}

My CSS for positioning the arrow:

#scroll-top {position:fixed;right:20px;bottom:40px;display:block;z-index:999999;}
#scroll-top span {font-size:48px;color:#fa00ff;text-shadow: 0px 0px 1px #555;-webkit-transition: all 0.5s ease;-moz-transition: all 0.5s ease;-o-transition: all 0.5s ease;-ms-transition: all 0.5s ease;transition: all 0.5s ease;}
#scroll-top span:hover {color:#ffc300;text-shadow: 0px 0px 6px #555;-webkit-transition: all 0.5s ease;-moz-transition: all 0.5s ease;-o-transition: all 0.5s ease;-ms-transition: all 0.5s ease;transition: all 0.5s ease;}

As can be seen I also have a transition to take the suddenness out of its appearance/disappearance.

A jQuery scroll to top, which appears in a fixed place, bottom corner, as the page scrolls down. Clicking on the arrow link smoothly scrolls the page back to the top of the page, avoiding lots of mouse or finger movement on the screen.