scrollToTop:function(){// Create a buttonvarjump=$('<a />',{'href':'#','class':'btn btn-jump','title':'Back to the top…'});varicon=$('<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 buttonjump.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
// These are usually defined in _variables.scss partial$accentC:#cc0000;$accentH:darken($accentC,15%);$bgCol:#000000;$bgOpacity:0.8;.btn{padding:6px12px}.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)
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.
Jan Pozivil
This snippet uses Font Awesome icon.
HTTPSSSH
You can clone a snippet to your computer for local editing.
Learn more.
planX.scrollToTop() – creates a clickable button, that appears after user scrolled down on page. If clicked, it scrolls the page to the top.
This snippet uses Font Awesome icon.