Snippets

Jan Pozivil Scroll To Top

Created by Jan Pozivil last modified
scrollToTop.js
Raw 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
scrollToTop: function()
{
 // Create a button
 var jump = $('<a />',
 {
  'href': '#',
  'class': 'btn btn-jump',
  'title': 'Back to the top…'
 });
 
 var icon = $('<i />', { 'class': 'fa fa-angle-up fa-2x' }); // Create a FA icon
 $('body').append( jump );      // Append the button to the end of <body>
 jump.append( icon );           // Insert the icon into the button
 
 jump.on('click', function(eve) // Connect a event listener on click on the button
 {
  eve.preventDefault();
  $('body, html').animate({ 'scrollTop': 0}, 600); // animate to the top of body, html
 });
 $(window).scroll(function()
                  {
  if ( $(this).scrollTop() != 0 )
  { jump.fadeIn(300); }
  else
  { jump.fadeOut(300); }
 });
} //end of scrollToTop
scrollToTop.scss
Raw 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
// These are usually defined in _variables.scss partial
$accentC: #cc0000;
$accentH: darken($accentC, 15%);
$bgCol: #000000;
$bgOpacity: 0.8;
.btn {
  padding: 6px 12px
}

.btn-jump {
  position: fixed;
  right: 0;
  bottom: 0;
  display: none;
  color: $accentC;
  background-color: rgba($bgCol, $bgOpacity);
  z-index: 10000;
  &:hover {
    color: $accentH;
  }
}

Comments (2)

  1. Jan Pozivil

    planX.scrollToTop() – creates a clickable button, that appears after user scrolled down on page. If clicked, it scrolls the page to the top.

HTTPS SSH

You can clone a snippet to your computer for local editing. Learn more.