Skip to content

Instantly share code, notes, and snippets.

@srfrnk
Last active August 29, 2015 13:56
Show Gist options
  • Save srfrnk/8887352 to your computer and use it in GitHub Desktop.
Save srfrnk/8887352 to your computer and use it in GitHub Desktop.
angular directive to add a fixed floater that scrolls page to top. appears only when scrolled down.
app.directive("backToTop", ["$window", function ($window) {
return {
restrict: 'E',
transclude: true,
template: '<div class="back-to-top"><style>' +
'.back-to-top {' +
' position: fixed;' +
' opacity: 0;' +
'}' +
'.back-to-top.active {' +
' opacity: 1;' +
'}' +
'</style>' +
'<div ng-transclude /></div>',
replace: true,
link: function (scope, element, attrs) {
var offset = parseInt(attrs.offset) || 220;
var duration = parseInt(attrs.duration) || 100;
var window = angular.element($window);
window.scroll(function () {
element.toggleClass("active", window.scrollTop() > offset);
});
element.click(function (event) {
event.preventDefault();
angular.element("html, body").animate({ scrollTop: 0 }, duration);
return false;
});
}
};
}]);
.back-to-top {
bottom: 2em;
right: 0px;
border-top-left-radius: @cornerRadius;
border-bottom-left-radius: @cornerRadius;
color: @highlightColor;
background-color: fade(@textColor, 40);
font-size: 20px;
padding: 1em;
cursor: pointer;
-moz-transition: all 200ms ease-in-out;
-o-transition: all 200ms ease-in-out;
-webkit-transition: all 200ms ease-in-out;
transition: all 200ms ease-in-out;
&:hover {
background-color: fade(@textColor, 80);
}
}
<!-- Make sure you include angular :) -->
<back-to-top duration="700" title="Back To Top" offset="600">
<span class="glyphicon glyphicon-hand-up"></span>
</back-to-top>
<!-- That's it folks... -->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment