AngularJS docs を読んで、$anchorScroll
に要素へのスクロールをスムーズにする期間/緩和オプションがあるかどうかはわかりません。
それは言うだけです:
$location.hash('bottom');
// call $anchorScroll()
$anchorScroll();
私はjqueryを使用せず、使用したくありません。スクロールをよりスムーズにするために$anchorScroll
を作成または拡張する賢いまだ簡単な方法はまだありますか?
残念ながら、$anchorScroll
を使用してこれを行うことはできません。お気づきのとおり、$anchorScroll
にはオプションがなく、$ngAnimate
では機能しません。スクロールをアニメーション化するには、独自のサービス/ファクトリーまたは単純なjavascriptを使用する必要があります。
自己学習のために、スムーズなスクロールサービスの例を作成しました。これを行うにはおそらくもっと良い方法があるので、フィードバックをお勧めします。
要素にスクロールするには、任意の要素にng-click="gotoElement(ID)"
を添付します。さらに良い方法は、これをディレクティブにすることだと思います。
jsFiddleの動作例 です。
更新
現在、これを達成するための多くのサードパーティのディレクティブがあります。
また、角度スクロールを使用して、リンク「 https://github.com/durated/angular-scroll/ 」を使用することもできます。スムーズなスクロールであり、プロの外観を得るためのイージング機能もほとんどありません。
Brettからの回答は私にとって非常に役立ちました。モジュール化とテスト容易性に関して、彼のソリューションにいくつかの小さな変更を加えました。
ここにもう1つあります JsFiddleでの作業例 これには、テストを含む他のバージョンが含まれています。
テストには、カルマとジャスミンを使用しています。署名は次のようにわずかに変更されました。
anchorSmoothScroll.scrollTo(elementId, speed);
Elementはスクロール先の必須属性であり、速度はオプションです(デフォルトは20)(以前と同様)。
NgSmoothScroll、リンク: https://github.com/d-oliveros/ngSmoothScroll を使用することもできます。
smoothScroll
モジュールを依存関係として含めるだけで、次のように使用します。
<a href="#" scroll-to="my-element-3">Click me!</a>
ここでのソリューションはどれも、OPが最初に要求したこと、つまり、$anchorScroll
をスムーズにスクロールさせることを実際に実行しません。スムーズスクロールディレクティブと$anchroScroll
の違いは、$location.hash()
を使用/変更することです。これは場合によっては望ましい場合があります。
以下は、$ anchorScrollスクロールをスムーズスクロールに置き換える簡単なモジュールの要旨です。スクロール自体に https://github.com/oblador/angular-scroll ライブラリを使用します(必要に応じて他のものに置き換えてください。簡単なはずです)。
https://Gist.github.com/mdvorak/fc8b531d3e082f3fdaa9
注:実際には、スムーズにスクロールするには$ anchorScrollを取得しませんが、スクロールのハンドラーを置き換えます。
アプリケーションでmdvorakSmoothScroll
モジュールを参照するだけで有効にできます。
$anchorScroll
をアニメーション化する方法を知りません。プロジェクトでそれを行う方法は次のとおりです。
/* Scroll to top on each ui-router state change */
$rootScope.$on('$stateChangeStart', function() {
scrollToTop();
});
そして、JS関数:
function scrollToTop() {
if (typeof jQuery == 'undefined') {
return window.scrollTo(0,0);
} else {
var body = $('html, body');
body.animate({scrollTop:0}, '600', 'swing');
}
log("scrollToTop");
return true;
}
アラン、ありがとう。興味のある方は、John Pappa標準に基づいてフォーマットしました。
(function() {
'use strict';
var moduleId = 'common';
var serviceId = 'anchorSmoothScroll';
angular
.module(moduleId)
.service(serviceId, anchorSmoothScroll);
anchorSmoothScroll.$inject = ['$document', '$window'];
function anchorSmoothScroll($document, $window) {
var document = $document[0];
var window = $window;
var service = {
scrollDown: scrollDown,
scrollUp: scrollUp,
scrollTo: scrollTo,
scrollToTop: scrollToTop
};
return service;
function getCurrentPagePosition(currentWindow, doc) {
// Firefox, Chrome, Opera, Safari
if (currentWindow.pageYOffset) return currentWindow.pageYOffset;
// Internet Explorer 6 - standards mode
if (doc.documentElement && doc.documentElement.scrollTop)
return doc.documentElement.scrollTop;
// Internet Explorer 6, 7 and 8
if (doc.body.scrollTop) return doc.body.scrollTop;
return 0;
}
function getElementY(doc, element) {
var y = element.offsetTop;
var node = element;
while (node.offsetParent && node.offsetParent !== doc.body) {
node = node.offsetParent;
y += node.offsetTop;
}
return y;
}
function scrollDown(startY, stopY, speed, distance) {
var timer = 0;
var step = Math.round(distance / 25);
var leapY = startY + step;
for (var i = startY; i < stopY; i += step) {
setTimeout('window.scrollTo(0, ' + leapY + ')', timer * speed);
leapY += step;
if (leapY > stopY) leapY = stopY;
timer++;
}
};
function scrollUp(startY, stopY, speed, distance) {
var timer = 0;
var step = Math.round(distance / 25);
var leapY = startY - step;
for (var i = startY; i > stopY; i -= step) {
setTimeout('window.scrollTo(0, ' + leapY + ')', timer * speed);
leapY -= step;
if (leapY < stopY) leapY = stopY;
timer++;
}
};
function scrollToTop(stopY) {
scrollTo(0, stopY);
};
function scrollTo(elementId, speed) {
var element = document.getElementById(elementId);
if (element) {
var startY = getCurrentPagePosition(window, document);
var stopY = getElementY(document, element);
var distance = stopY > startY ? stopY - startY : startY - stopY;
if (distance < 100) {
this.scrollToTop(stopY);
} else {
var defaultSpeed = Math.round(distance / 100);
speed = speed || (defaultSpeed > 20 ? 20 : defaultSpeed);
if (stopY > startY) {
this.scrollDown(startY, stopY, speed, distance);
} else {
this.scrollUp(startY, stopY, speed, distance);
}
}
}
};
};
})();