2016-08-21 2 views
1

Я создаю сайт, используя AngularJS, и я совершенно новичок в нем. Но я знаком с jQuery. На моем веб-сайте я хочу сгладить прокрутку до определенного <div> нажатием кнопки. У меня есть код для этого в jQuery. Но я не знаю, как написать тот же код в AngularJS. Может ли кто-нибудь сказать мне, как написать этот же код в AngularJS?Плавно прокрутите до div

Вот Отрывок

$('#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

Попробуйте с нг нажмите

<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

Вы * не * хочудля управления DOM в угловом контроллере. [Подробнее об этом] (http://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background) – isherwood

Смежные вопросы