主要是使用angular的指令系统来自己封装一个指令。其写法有多种,这里只是很简单的一种写法。
HTML片段代码1:
<div class="text-center bigtop">
<go-you-want>
<img ng-src="{{downimg}}"/>
</go-you-want>
</div>
HTML片段代码2:
<div class="goTop clearfix" style="position: fixed;right: 10px;bottom: 200px;">
<back-to-top class="label " title="返回顶部"><img src="img/gotop_03.png"/></back-to-top>
</div>
js指令:
myApp.directive("goYouWant", function() {
return {
restrict : "E",
link : function(scope, element, attr) {
var e = $(element);
var firstDivHeight = $('.firstH').outerHeight(); //这里需要自己定义需要到达的地方
e.click(function() {
$('body, html').animate({
"scrollTop" : firstDivHeight
}, 500)
})
}
}
});
//回到顶部
//var flag = false;
myApp.directive("backToTop", function () {
return {
restrict: "E",
link: function (scope, element, attr) {
var e = $(element);
if($(document).scrollTop() == 0) {
e.fadeOut(200);
}
$(window).scroll(function () { //滚动时触发
console.log($(document).scrollTop())
if ($(document).scrollTop() > 800) {
//flag = true;
e.fadeIn(300);
} //获取滚动条到顶部的垂直高度,到相对顶部800px高度显示
else {
//flag = false;
e.fadeOut(200);
}
});
/*点击回到顶部*/
e.click(function () {
$('html, body').animate({ //添加animate动画效果
scrollTop: 0
}, 1000);
});
}
};
});