2016-08-21 18 views
1

私はAngularJSを使用してウェブサイトを構築しています。しかし、私はjQueryに精通しています。私のウェブサイトでは、ボタンをクリックすると具体的な<div>にスクロールしたいです。私はこれのためのコードをjQueryに持っています。しかし、私はAngularJSに同じコードを書く方法を知らない。 AngularJSに同じコードを書く方法を教えてもらえますか?ここで円滑に部門にスクロール

はスニペット

$('#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'); 
 
});
div {height: 900px; border:2px solid #333; padding:10px; margin: 0px;} 
 
button {position: fixed; margin-top: 50px;}
<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>

答えて

-1

がNGクリックコントローラで

<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'); 
} 
} 
+0

あなたは* *たくありませんAngularコントローラでDOMを操作する。 [それ以上](http://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background) – isherwood

関連する問題