Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Scroll To Top angular.js directive
<!-- Angular -->
<script src="../angular.min.js"></script>
<!-- jQuery -->
<script src="../jquery-2.1.1.min.js"></script>
<!-- Font Awesome -->
<link rel="stylesheet" type="text/css" media="screen" href="css/font-awesome.min.css">
<!-- Add the directive to your page -->
<div scroll-to-top=""></div>
/*
Created on : May 5, 2015, 1:52:36 PM
Author : Nick
Source : http://www.webtipblog.com/adding-scroll-top-button-website/
*/
.scroll-top-wrapper {
position: fixed;
opacity: 0;
visibility: hidden;
overflow: hidden;
text-align: center;
z-index: 99999999;
background-color: #777777;
color: #eeeeee;
width: 50px;
height: 48px;
line-height: 48px;
right: 30px;
bottom: 30px;
padding-top: 2px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.scroll-top-wrapper:hover {
background-color: #888888;
}
.scroll-top-wrapper.show {
visibility:visible;
cursor:pointer;
opacity: 1.0;
}
.scroll-top-wrapper i.fa {
line-height: inherit;
}
angular.module('scrollToTop', [])
.directive('scrollToTop', function () {
/**
* This directive wraps jQuery code in an Angular application
* make sure you add the appropriate dependencies.
* Also don't forget to include in your project "angular.module('myApp', ["scrollToTop"]);"
*
* This directive is based on tutorial
* source: http://www.webtipblog.com/adding-scroll-top-button-website/
*
* @type directive
*/
var directive = {
scope: {},
restrict: 'AE',
template: "<div class=\"scroll-top-wrapper \">\n\
<span class=\"scroll-top-inner\">\n\
<i class=\"fa fa-2x fa-arrow-circle-up\"></i>\n\
</span>\n\
</div>",
link: function () {
// hide or show button according to offset of window to page
$(function () {
$(document).on('scroll', function () {
if ($(window).scrollTop() > 100) {
$('.scroll-top-wrapper').addClass('show');
} else {
$('.scroll-top-wrapper').removeClass('show');
}
});
});
// handle click event
$(function () {
$(document).on('scroll', function () {
if ($(window).scrollTop() > 100) {
$('.scroll-top-wrapper').addClass('show');
} else {
$('.scroll-top-wrapper').removeClass('show');
}
});
$('.scroll-top-wrapper').on('click', scrollToTop);
});
function scrollToTop() {
verticalOffset = typeof (verticalOffset) !== 'undefined' ? verticalOffset : 0;
element = $('body');
offset = element.offset();
offsetTop = offset.top;
$('html, body').animate({scrollTop: offsetTop}, 500, 'linear');
}
}
};
return directive;
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.