Regarding how angularJS gets back to the top, just code it!
1. Build instructions,Use registerDirective build directive to add to the internal hasDirectives object to facilitate matching when global searching for instructions.
/**
**Back to top
**/
define(["app"], function (app) {
app().registerDirective("backToTop", function () {
return {
restrict: "E",
link: function (scope, element, attr) {
var e = $(element);
$(window).scroll(function () { // Triggered when scrolling if ($(document).scrollTop() > 300) //Get the vertical height of the scroll bar to the top, and display it to the height of 300px relative to the top (300)
else
(200);
});
/*Click back to top*/
(function () {
$('html, body').animate({ //Add animate effect scrollTop: 0
}, 500);
});
}
};
});
});
Note:
registerDirective is the $CompileProvider method. It mainly adds built-in instructions to the internal hasDirectives object to facilitate matching when global searching for instructions.
From the perspective of html, directives can be considered as an identifier, which can appear in html as element name (E), element attribute (A), comment (M), and class name (C). From the perspective of JavaScript, it can be considered as a standardized instruction object with special meaning returned.
The link function creates instructions that can operate dom, with the signature as follows:
link:function(scope,element,attrs){};
scope registers the scope of the listener in its internal scope.
element represents an instance element, which refers to the element that uses this directive. In the postLink function we should only operate the child elements of this element, because the child elements have been linked.
attrs represents instance attributes, and is a standardized list of attributes defined on elements that can be shared among link functions of all instructions. It will be passed in the form of a JavaScript object. 2. Call the defined backToTop directive object on the page.
2. Call the backToTop command on the page
<back-to-top class="back_top" title="Back to Top"> <i class="fa fa-angle-up"></i> </back-to-top>
Note:
restrict - A string of a subset of EACM, which limits directive to the specified declaration method. If omitted, directive will only allow declarations via attributes:
E - Element name: <back-to-top></back-to-top>
A - Attribute name: <div back-to-top</div>
C - class name: <div class="back-to-top"></div>
M - Comments: <!-- back-to-top -->
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.