{"id":133,"date":"2016-02-29T10:56:06","date_gmt":"2016-02-29T10:56:06","guid":{"rendered":"http:\/\/muthu.co\/?p=133"},"modified":"2021-01-02T14:06:03","modified_gmt":"2021-01-02T14:06:03","slug":"scroll-to-top-angular-directive","status":"publish","type":"post","link":"http:\/\/write.muthu.co\/scroll-to-top-angular-directive\/","title":{"rendered":"Scroll to Top Angular Directive"},"content":{"rendered":"<p>The below directive creates a scroll to top icon on the bottom right corner of the page.\u00a0On click it will smoothly scroll you position back to top.<\/p>\n<p>Angular Directive:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">function ScrollToTop() {\r\n    return {\r\n        template: \"&lt;a ng-click='click()' class='scroll-to-top-anchor'&gt;&lt;\/a&gt;\",\r\n        replace: true,\r\n        scope: true,\r\n        controller: function($scope) {\r\n            $scope.click = function() {\r\n                var startY = currentYPosition();\r\n                var stopY = 0; \/\/top is zero\r\n                var distance = stopY &gt; startY ? stopY - startY : startY - stopY;\r\n                if (distance &lt; 100) {\r\n                    scrollTo(0, stopY);\r\n                    return;\r\n                }\r\n                var speed = Math.round(distance \/ 100);\r\n                if (speed &gt;= 20) speed = 20;\r\n                var step = Math.round(distance \/ 25);\r\n                var leapY = stopY &gt; startY ? startY + step : startY - step;\r\n                var timer = 0;\r\n                if (stopY &gt; startY) {\r\n                    for (var i = startY; i &lt; stopY; i += step) {\r\n                        setTimeout(\"window.scrollTo(0, \" + leapY + \")\", timer * speed);\r\n                        leapY += step;\r\n                        if (leapY &gt; stopY) leapY = stopY;\r\n                        timer++;\r\n                    }\r\n                    return;\r\n                }\r\n                for (var i = startY; i &gt; stopY; i -= step) {\r\n                    setTimeout(\"window.scrollTo(0, \" + leapY + \")\", timer * speed);\r\n                    leapY -= step;\r\n                    if (leapY &lt; stopY) leapY = stopY;\r\n                    timer++;\r\n                }\r\n                \/\/$window.scrollTo(0, 0);\r\n            }\r\n\r\n            function currentYPosition() {\r\n                \/\/ Firefox, Chrome, Opera, Safari\r\n                if (self.pageYOffset) return self.pageYOffset;\r\n                \/\/ Internet Explorer 6 - standards mode\r\n                if (document.documentElement &amp;&amp; document.documentElement.scrollTop)\r\n                    return document.documentElement.scrollTop;\r\n                \/\/ Internet Explorer 6, 7 and 8\r\n                if (document.body.scrollTop) return document.body.scrollTop;\r\n                return 0;\r\n            }\r\n        }\r\n    };\r\n}\r\n<\/pre>\n<p>Inject the directive into your app.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">(function() {\r\n    'use strict';\r\n\r\n    angular\r\n        .module('myApp')\r\n        .directive('scrollToTop', ScrollToTop);\r\n\r\n})();\r\n<\/pre>\n<p>CSS style for the anchor (I have added the icon image in the css itself to avoid any external file dependencies).<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">.scroll-to-top-anchor {\r\n    visibility: visible;\r\n    opacity: 1;\r\n    height: 60px;\r\n    width: 60px;\r\n    right: 30px;\r\n    bottom: 30px;\r\n    display: inline-block;\r\n    position: fixed;\r\n    z-index: 10;\r\n    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);\r\n    overflow: hidden;\r\n    text-indent: 100%;\r\n    white-space: nowrap;\r\n    background: #337ab7 url('data:image\/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMTZweCIgaGVpZ2h0PSIxNnB4IiB2aWV3Qm94PSIwIDAgMTYgMTYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDE2IDE2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwb2x5Z29uIGZpbGw9IiNGRkZGRkYiIHBvaW50cz0iOCwyLjggMTYsMTAuNyAxMy42LDEzLjEgOC4xLDcuNiAyLjUsMTMuMiAwLDEwLjcgIi8+DQo8L3N2Zz4NCg==') no-repeat center 50%;\r\n    color: #e86256;\r\n    text-decoration: none;\r\n}\r\n<\/pre>\n<p>The above CSS will create an icon as shown below<\/p>\n<p><a href=\"https:\/\/muthu.co\/wp-content\/uploads\/2016\/02\/sr2.jpg\" rel=\"attachment wp-att-135\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-135 aligncenter\" src=\"https:\/\/muthu.co\/wp-content\/uploads\/2016\/02\/sr2.jpg\" alt=\"sr2\" width=\"100\" height=\"104\" \/><\/a><\/p>\n<p>Now for the last part! All you need to create a scroll to top icon is to place the below code somewhere at the end of your html page.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;scroll-to-top\/&gt;<\/pre>\n<p>Demo:\u00a0<a href=\"https:\/\/jsfiddle.net\/muthuwz\/a7o404o4\/17\/\" target=\"_blank\" rel=\"noopener\">https:\/\/jsfiddle.net\/muthuwz\/a7o404o4\/17\/<\/a><\/p>\n<p>&nbsp;<\/p>\n<p>Adapted from\u00a0the\u00a0Anchor Smooth Scroll &#8211; Angular Directive by Justin.<br \/>\n<a href=\"https:\/\/gist.github.com\/justinmc\/d72f38339e0c654437a2\">https:\/\/gist.github.com\/justinmc\/d72f38339e0c654437a2<\/a><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp; <\/p>\n","protected":false},"excerpt":{"rendered":"<p>The below directive creates a scroll to top icon on the bottom right corner of the page.\u00a0On click it will smoothly scroll you position back to top. Angular Directive: function ScrollToTop() { return { template: &#8220;&lt;a ng-click=&#8217;click()&#8217; class=&#8217;scroll-to-top-anchor&#8217;&gt;&lt;\/a&gt;&#8221;, replace: true, scope: true, controller: function($scope) { $scope.click = function() { var startY = currentYPosition(); var stopY [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[10,2],"tags":[45,52],"_links":{"self":[{"href":"http:\/\/write.muthu.co\/wp-json\/wp\/v2\/posts\/133"}],"collection":[{"href":"http:\/\/write.muthu.co\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/write.muthu.co\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/write.muthu.co\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/write.muthu.co\/wp-json\/wp\/v2\/comments?post=133"}],"version-history":[{"count":1,"href":"http:\/\/write.muthu.co\/wp-json\/wp\/v2\/posts\/133\/revisions"}],"predecessor-version":[{"id":1662,"href":"http:\/\/write.muthu.co\/wp-json\/wp\/v2\/posts\/133\/revisions\/1662"}],"wp:attachment":[{"href":"http:\/\/write.muthu.co\/wp-json\/wp\/v2\/media?parent=133"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/write.muthu.co\/wp-json\/wp\/v2\/categories?post=133"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/write.muthu.co\/wp-json\/wp\/v2\/tags?post=133"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}