Question

我正在使用AngularJS建立一个网站，我对它很陌生。但我熟悉jQuery。在我的网站中，我希望在点击按钮时平滑滚动到特定的<div>。我在jQuery中有一个代码。但我不知道如何在AngularJS中编写相同的代码。谁能告诉我如何在AngularJS中编写相同的代码？

这是片段

＆＃13;

$('#todivone').click(function () {
    $('html, body').animate({
        scrollTop: $('#divone').offset().top
    }, 'slow');
});
$('#todivtwo').click(function () {
    $('html, body').animate({
        scrollTop: $('#divtwo').offset().top
    }, 'slow');
});
$('#todivthree').click(function () {
    $('html, body').animate({
        scrollTop: $('#divthree').offset().top
    }, 'slow');
});

＆＃13;

div {height: 900px; border:2px solid #333; padding:10px; margin: 0px;}
button {position: fixed; margin-top: 50px;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="todivtwo">GOTO DIV 2</button>
<br>
<button id="todivthree">GOTO DIV 3</button>
<br>
<button id="todivone">BACK TO DIV 1</button>
<br>
<div id="divone">DIV CONTENT 1</div>
<div id="divtwo">DIV CONTENT 2</div>
<div id="divthree">DIV CONTENT 3</div>

＆＃13;

Answer 1

尝试使用ng-click

    <button id="divone" ng-click="goToDiv(1)">DIV CONTENT 1</button>
    <button id="divtwo" ng-click="goToDiv(2)">DIV CONTENT 2</button>
    <button id="divthree" ng-click="goToDiv(3)">DIV CONTENT 3</button>

在控制器中：

$scope.goToDiv= function(a){
if(a==1){
 $('html, body').animate({
        scrollTop: $('#divone').offset().top
    }, 'slow');
}
if(a==2){
$('html, body').animate({
        scrollTop: $('#divtwo').offset().top
    }, 'slow');
}
if(a==3){
$('html, body').animate({
        scrollTop: $('#divthree').offset().top
    }, 'slow');
}
}

顺利滚动到div

1 个答案: