SharePointでスクロールするとトップへ戻るボタンを表示してみた

SharePointのグローバルナビゲーションは固定ではないので、コンテンツが下へ長くなったときスクロールしてくと消えてしまって何気に不便です。
特に、SP2013のosloテーマなどサイドリンクバーを表示しないテーマの場合、また最上部までスクロールしてかないと他のページやコンテンツへ飛べません。

そこで、巷のwebサイトでよく見かけるような、ある程度スクロールしたら「TOPへ戻る」ボタンを表示させようと思い、

jQueryでスクロールすると表示する系いろいろ

などみつつちょいちょいと書いてみたのですがうまくいかず。

どうも、SharePointではスクロール位置をwindowオブジェクトで取れないっぽいのです。
困ったー!と、四苦八苦のすえ、、、
以下のコードでスクロール位置が取れ、実装できました!

HTML

<p id="page-top">
   <a href="#nav">TOP</a>
</p>

CSS

#page-top
{
    position: fixed;
    bottom: 20px;
    right: 50px;
}

#page-top a
{
    background: #666;
    text-decoration: none;
    color: #fff;
    width: 50px;
    padding: 8px 0;
    text-align: center;
    display: block;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
}

#page-top a:hover
{
    text-decoration: none;
    background: #999;
}

JavaScript(jQuery使ってます)

var topBtn = $('#page-top');
topBtn.hide();
$('#s4-workspace').scroll(function () {
    if ($(this).scrollTop() > 400) {
        topBtn.fadeIn();
    } else {
        topBtn.fadeOut();
   }
});
topBtn.click(function () {
    $('#s4-workspace').animate({
        scrollTop: 0
    }, 500, "swing");
    return false;
});

ちなみに、2010ではトライしてないのですが、上のやり方でいけるんでしょうか・・・??
【追記】
SharePoint2010でも、#s4-workspaceでスクロール位置がとれました!
なので、2010でもこのコードでトップへ戻るボタンが表示できます。

広告

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中