脚本宝典收集整理的这篇文章主要介绍了angularjs scrollTop,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
<style>
.scrollToTop {
position: fixed;
bottom: 70px;
right: 15px;
width: 45px;
height: 45px;
border-radius: 25px;
background: url(/forum/img/toTop.png) center center no-repeat rgba(0,0,0,.4);
background-size: 50% 25%;
}
</style>
//回到顶部
app.directive('scrollTop', function ($window, $document, $compile) {
return {
restrict: 'A',
link: function ($scope, elem, attr, ctrl) {
VAR elShare = Angular.element('<a title="返回顶部" ng-click="goTop()" class="scrollToTop"></a>');
function showShare() {
if (!elShare.hasClass('ng-scope')) {
$compile(elShare)($scope);
var body = $document.find('body').eq(0);
body.append(elShare);
}
elShare.show();
}
var loading = false;
$scope.goTop = function () {
var idToScroll = attr.href;
var $target;
if (idToScroll) {
$target = $(idToScroll);
} else {
$target = elem;
}
loading = true;
$("body").aniMATE({ scrollTop: $target.offset().top }, "fast", function () {
elShare.hide();
loading = false;
});
}
//http://stackoverflow.COM/questions/13549216/changing-css-on-scrolling-angular-style
var scrollTop = 0;
var windowEl = angular.element($window);
var handler = function () {
if (loading) return;
var ele = document.body;
if (ele.scrollTop > 50 && scrollTop < ele.scrollTop) {
showShare();
}
else {
elShare.hide();
}
scrollTop = document.body.scrollTop;
}
windowEl.on('scroll', $scope.$apply.bind($scope, handler));
handler();
}
};
});
以上是脚本宝典为你收集整理的angularjs scrollTop全部内容,希望文章能够帮你解决angularjs scrollTop所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。