またしてもSharePointの機能とはさして関係のないネタです。当ブログ、こんなんばっかりですがお許しください・・・
以前、こんな記事を書きましたが、
SharePointでスクロールするとトップへ戻るボタンを表示してみた
こちらの姉妹編のエントリです。
最近のwebサイトでは、ページ内リンクへのジャンプはアニメーションでスルスル～っとスクロールしてくのがもう定番ですよね。
これをSharePointのページにも実装してみました。
スムーススクロールは巷にプラグインなどあふれてますが、余計なものを入れたくなかったのでCSS-Tricksにあったこちらを元ネタにしました。
Smooth Scrolling | CSS-Tricks
jQueryさえあれば動かせます。
ソースコードです。SharePoint2010、2013で動作確認しています。
JavaScript
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
var def = $('div[id*=titlerow]').offset().top;
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('#s4-workspace').animate({
scrollTop: target.offset().top - def
}, 500);
return false;
}
}
});
});
HTMLサンプル
<h3><a href="#section1">Section1</a></h3> <h3><a href="#section2">Section2</a></h3> <h1 id="section1">Section1</h1> <div>Vivamus suscipit tortor eget felis porttitor volutpat. Pellentesque in ipsum id orci porta dapibus. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Pellentesque in ipsum id orci porta dapibus. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Pellentesque in ipsum id orci porta dapibus. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Cras ultricies ligula sed magna dictum porta. Proin eget tortor risus.</div> <h1 id="section2">Section2</h1> <div>Vivamus suscipit tortor eget felis porttitor volutpat. Pellentesque in ipsum id orci porta dapibus. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Pellentesque in ipsum id orci porta dapibus. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Pellentesque in ipsum id orci porta dapibus. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Cras ultricies ligula sed magna dictum porta. Proin eget tortor risus.</div>
SharePointで実装するときの注意点ですが、windowオブジェクトではスクロール位置がとれないので、idが”#s4-workspace”のdiv要素を動かします。
また、リンク元の要素がページの半ばにあることも考慮して、サイトのタイトルエリアがwindowのトップからどれだけ上にふっ飛んでるかでスクロール幅を調整しています。
HTML側は、サンプルのように基本飛ばしたい先の要素にハッシュと同じID名を振ればよいのですが、スクリプト的にはアンカーにも対応してます。
余談ですが、SharePointでページにアンカーをつけたい時は、リンクツールでBookmark欄に任意のアンカー名をいれればつけられます。
なので、上記コードをパッケージ化（コンテンツエディタwebパーツに仕込んでExportするなど）すれば、HTMLを書けないユーザでもスムーススクロールできるようになりそうですね！
Me & SharePoint 