각도에서의 ScrollTo 함수JS
퀵 네비게이션이 제대로 작동하도록 노력하고 있습니다.옆으로 떠있어요.링크를 클릭하면 페이지의 해당 ID로 이동합니다.트리하우스에서 온 안내원을 따라갑니다.스크롤은 다음과 같습니다.
$("#quickNav a").click(function(){
var quickNavId = $(this).attr("href");
$("html, body").animate({scrollTop: $(location).offset().top}, "slow");
return false;
});
나는 처음에 그것을 그 앞에 두었다.</body>컴파일 전에는 퀵내브 컴파일 전)의 것 같습니다ng-hideDOM(도미)
콘솔에서 코드 블록을 실행하면 스크롤이 예상대로 작동합니다.
이것을 컨트롤러로 옮기는 것이 더 효과적이라고 생각했습니다.또는 명령어 내에서 이동하는 것이 더 효과적이라고 생각됩니다.하지만 난 그걸 할 수 있는 운이 없어.어떻게 하면 이 코드 블록을 AngularJS와 연동시킬 수 있을까요?
클릭 시 요소로 스크롤되는 간단한 지시문은 다음과 같습니다.
myApp.directive('scrollOnClick', function() {
return {
restrict: 'A',
link: function(scope, $elm) {
$elm.on('click', function() {
$("body").animate({scrollTop: $elm.offset().top}, "slow");
});
}
}
});
데모: http://plnkr.co/edit/yz1EHB8ad3C59N6PzdCD?p=preview
지침 작성에 대한 도움말은 http://egghead.io에서 #10 "first direction"부터 시작하는 비디오를 참조하십시오.
edit: href로 지정된 특정 요소까지 스크롤하려면 체크만 하면 됩니다.attrs.href.
myApp.directive('scrollOnClick', function() {
return {
restrict: 'A',
link: function(scope, $elm, attrs) {
var idToScroll = attrs.href;
$elm.on('click', function() {
var $target;
if (idToScroll) {
$target = $(idToScroll);
} else {
$target = $elm;
}
$("body").animate({scrollTop: $target.offset().top}, "slow");
});
}
}
});
쓸 수.<div scroll-on-click></div>이치노 ★★★<a scroll-on-click href="#element-id"></div>아이디 ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★」
이 명령어를 사용하는 경우에는 다음 명령어를 사용하는 것이 좋습니다.
페이지내의 임의의 요소로 스크롤 할 수 있습니다.
.directive('scrollToItem', function() {
return {
restrict: 'A',
scope: {
scrollTo: "@"
},
link: function(scope, $elm,attr) {
$elm.on('click', function() {
$('html,body').animate({scrollTop: $(scope.scrollTo).offset().top }, "slow");
});
}
}})
사용방법(예를 들어 div 'back-to-top'을 클릭하면 ID 스크롤-top으로 스크롤됩니다):
<a id="top-scroll" name="top"></a>
<div class="back-to-top" scroll-to-item scroll-to="#top-scroll">
또한 html, body 요소의 chrome, firefox, safari 및 IE 원인에 의해 지원됩니다.
스크롤 용기 내의 특정 요소에 애니메이션을 수행하려면(고정 DIV)
/*
@param Container(DIV) that needs to be scrolled, ID or Div of the anchor element that should be scrolled to
Scrolls to a specific element in the div container
*/
this.scrollTo = function(container, anchor) {
var element = angular.element(anchor);
angular.element(container).animate({scrollTop: element.offset().top}, "slow");
}
다음을 사용한 각도 솔루션$anchorScrollBen Lesh가 현재 아카이브한 블로그 투고에서 가져온 것입니다.이것은 그가 투고하고 있는 SO답변(루팅 내에서 이것을 실시하는 방법에 대한 개서 포함)에서도 상세하게 재현됩니다.
app.controller('MainCtrl', function($scope, $location, $anchorScroll) {
var i = 1;
$scope.items = [{ id: 1, name: 'Item 1' }];
$scope.addItem = function (){
i++;
//add the item.
$scope.items.push({ id: i, name: 'Item ' + i});
//now scroll to it.
$location.hash('item' + i);
$anchorScroll();
};
});
다음은 이 솔루션을 제공한 블로그의 plunker입니다.http://plnkr.co/edit/xi2r8wP6ZhQpmJrBj1jM?p=preview
플래커의 템플릿이 되어 있으므로 주의해 .이 템플릿에는 이 템플릿이 되어 있습니다.이것에 주의해 주세요.id을 알고 있습니다.$anchorScroll★★★★★★★★★★★★★★★★★★:
<li ng-repeat="item in items"
id="item{{item.id}}"
>{{item.name}</li>
순수한 Javascript 솔루션을 원하는 경우 다음 중 하나를 참조하십시오.
상위 컨테이너 ID 및 대상 스크롤 ID를 사용하여 코드에서 runScroll을 호출합니다.
function runScroll(parentDivId,targetID) {
var longdiv;
longdiv = document.querySelector("#" + parentDivId);
var div3pos = document.getElementById(targetID).offsetTop;
scrollTo(longdiv, div3pos, 600);
}
function scrollTo(element, to, duration) {
if (duration < 0) return;
var difference = to - element.scrollTop;
var perTick = difference / duration * 10;
setTimeout(function () {
element.scrollTop = element.scrollTop + perTick;
if (element.scrollTop == to) return;
scrollTo(element, to, duration - 10);
}, 10);
}
레퍼런스:브라우저 간 JavaScript(jQuery가 아님)를 스크롤하여 상단 애니메이션으로 이동합니다.
앤디에게 사례 감사드리며, 이것은 매우 도움이 되었습니다.저는 한 페이지 스크롤을 개발 중이라 해시방 URL을 사용할 때 Angular가 새로고침되는 것을 원하지 않기 때문에 조금 다른 전략을 구현하고 있습니다.또한 브라우저의 백/포워드 액션을 유지하고 싶습니다.
지시문과 해시를 사용하는 대신 $scope를 사용합니다.$watch on $location.검색하여 목표물을 얻습니다.이렇게 하면 깔끔한 앵커 태그가 붙습니다.
<a ng-href="#/?scroll=myElement">My element</a>
다음과 같이 watch 코드를 app.js의 모듈 선언에 연결했습니다.
.run(function($location, $rootScope) {
$rootScope.$watch(function() { return $location.search() }, function(search) {
var scrollPos = 0;
if (search.hasOwnProperty('scroll')) {
var $target = $('#' + search.scroll);
scrollPos = $target.offset().top;
}
$("body,html").animate({scrollTop: scrollPos}, "slow");
});
})
위의 코드에 관한 주의사항은 다른 루트에서 직접 URL에 접속하면 jQuery의 $target.offset() 호출에 맞춰 DOM이 로드되지 않을 수 있다는 것입니다.해결책은 $viewContentLoaded 워처 내에 이 코드를 중첩하는 것입니다.최종 코드는 다음과 같습니다.
.run(function($location, $rootScope) {
$rootScope.$on('$viewContentLoaded', function() {
$rootScope.$watch(function() { return $location.search() }, function(search) {
var scrollPos = 0
if (search.hasOwnProperty('scroll')) {
var $target = $('#' + search.scroll);
var scrollPos = $target.offset().top;
}
$("body,html").animate({scrollTop: scrollPos}, "slow");
});
});
})
Chrome 및 FF로 테스트 완료
나는 앤드류 조슬린의 대답을 사용했는데, 그것은 훌륭했지만 각진 경로 변경을 유발했고, 그것은 나를 위해 튀어 보이는 스크롤을 만들었다.루트 변경을 트리거하지 않도록 하려면
myApp.directive('scrollOnClick', function() {
return {
restrict: 'A',
link: function(scope, $elm, attrs) {
var idToScroll = attrs.href;
$elm.on('click', function(event) {
event.preventDefault();
var $target;
if (idToScroll) {
$target = $(idToScroll);
} else {
$target = $elm;
}
$("body").animate({scrollTop: $target.offset().top}, "slow");
return false;
});
}
}
});
또 다른 제안입니다.1개의 디렉티브와 셀렉터
HTML:
<button type="button" scroll-to="#catalogSection">Scroll To</button>
각도:
app.directive('scrollTo', function () {
return {
restrict: 'A',
link: function (scope, element, attrs) {
element.on('click', function () {
var target = $(attrs.scrollTo);
if (target.length > 0) {
$('html, body').animate({
scrollTop: target.offset().top
});
}
});
}
}
});
$anchorScroll도 주의해주세요
angle-scroll은 액티브하게 유지되며 jQuery에 의존하지 않습니다.
매우 명확한 답변입니다.ANGLE JS만을 사용하여 JQUERY는 의존하지 않습니다.
html을 아래 어딘가에 저장해당신의 html에<back-top>some text</back-top>
html을 상단 어딘가에 저장하세요.<div id="top"></div>
js:
/**
* @ngdoc directive
* @name APP.directive:backTop
<pre>
<back-top></back-top>
</pre>
*/
angular
.module('APP')
.directive('backTop', ['$location', '$anchorScroll' ,function($location, $anchorScroll) {
return {
restrict: 'E',
replace: true,
transclude: true,
template: '<span class=\'btn btn-mute pull-right\'><i class=\'glyphicon glyphicon-chevron-up\'></i><ng-transclude></ng-transclude></span>',
scope: {
},
link: function(scope, element) {
element.on('click', function(event) {
$anchorScroll(['top']);
});
}
};
}]);
요소의 ID를 사용하여 대상 div로 스크롤합니다.
지시(각선 1)
angular.module("App") // Module Name
.directive('scrollOnClick', function () {
return {
restrict: 'A',
scope: {
scrollTo: "@"
},
link: function (scope, $elm, attrs) {
//var idToScroll = attrs.href;
$elm.on('click', function () {
$('html,body').animate({ scrollTop: $(scope.scrollTo).offset().top }, "slow");
});
}
}
});
HTML 코드
<!-- Click to scroll -->
<a scroll-on-click scroll-to="#scheduleDiv">Click here to Scroll to Div With Id ""</a>
<!-- scrollable / target div -->
<div id="scheduleDiv">Test scrolling ... You are able to view me on click of above anchor tag.</div>
언급URL : https://stackoverflow.com/questions/17284005/scrollto-function-in-angularjs
'programing' 카테고리의 다른 글
| Jackson Json Type Info 。As.EXTERNAL_PROPERTY가 예상대로 작동하지 않습니다. (0) | 2023.02.15 |
|---|---|
| Date Time을 사용할 수 있는 이유MinValue가 UTC보다 이전 시간대로 일련화되지 않았습니까? (0) | 2023.02.15 |
| TypeError:scrollIntoView는 함수가 아닙니다. (0) | 2023.02.15 |
| Meteor는 어떤 보안 장치를 가지고 있나요? (0) | 2023.02.15 |
| "오류: 리듀서 실행 중에는 store.getState()를 호출할 수 없습니다." (0) | 2023.02.15 |