jQueryスムーズページAnchor位置付きのトランジション：固定メニュー - jquery、scroll、anchor

私はポジションを使う：固定メニュー http://communitychessclub.com/index.php ユーザーがスクロールしても画面上にメニューを保持するには：

CSS：

#sticky {margin:0 auto; display:table}
#sticky.stick {position: fixed;  top: 0; margin-left:48px; z-index: 10000; }

JS：

<script>
function sticky_relocate() {
var window_top = $(window).scrollTop();
var div_top = $("#sticky-anchor").offset().top;
if (window_top > div_top)
$("#sticky").addClass("stick")
else
$("#sticky").removeClass("stick");
}

$(function() {
$(window).scroll(sticky_relocate);
sticky_relocate();
});

$(window).scroll((function() {
var a="",  // a buffer to the hash
w = $(window);
return function() {
var h = location.hash;
// if hash is different from the previous one, which indicates
// the hash changed by user, then scroll the window down
// update the buffer
if (h != a) {
a = h;
w.scrollTop(w.scrollTop()-150)
}
};
})());
</script>

しかし、同じページのIDにリンクすると、画面が突然スクロールしてしまうという不満があります。そこで、「jQueryのスムーズなページアンカー遷移によるユーザーエクスペリエンスの改善」が http://www.spydertrap.com/blog/2012/08/user-experience-jquery-smooth-page-anchor-transitions/ デモが気に入った。私は下のjqueryコードと上のjqueryコードを混ぜて、スムーズなjqueryスクロールをしたいと思っていました。

彼らはこれを使用します（しかし、他のバージョンはここに存在します...問題は2つに加わる方法です）

jQueryコード：

function goToByScroll(id){
$("html,body").animate({scrollTop: $(id).offset().top},"slow");
}

HTML：

<ul class="nav">
<li><a href="#chapter1">Chapter 1</a></li>
<li><a href="#chapter2">Chapter 2</a></li>
<li><a href="#chapter3">Chapter 3</a></li>
</ul>

JSランチャー：

$(document).ready(function(){
$(".nav a").click(function(){
goToByScroll($(this).attr("href"));
return false;
});
});

これは上記のjqueryコードと結合することは可能ですか？

回答：

回答№1は0

私はちょうどクロームブラウザのJSコンソールを使ってあなたのページをハッキングしてみました。 goToByScroll 逐語的に実行し、これを実行します：

$("#sticky a").click(function(){
goToByScroll($(this).attr("href"));
return false;
});

そして確かに、アンカーIDの間でスクロールします。 実際のアンカーリンクではないナビゲーションバーのリンクをクリックすると例外がスローされるというマイナーな問題があります（例えば、 "ホーム"がホームページを指し、 "チェスキャンプ"がポップアップを開きます）。スクロールしたいアンカーリンクにクラスを追加し、そのクラスをセレクタに追加します。

たとえば、スティッキメニューバーのマークアップを次のように変更します。

<li><a href="http://www.chessset.com/">Chess Center</a>
<div><ul>

<li><a class="anchor" href="#cc_events">about the RCC</a></li>

<li><a href="#" onclick="TINY.box.show({url:"RCC_chess_lessons.php",boxid:"RCC_chess_camp", width:950, height:650}); return false;">chess camp</a></li>

<li><a href="#" onclick="TINY.box.show({url:"RCC_Marchand_Open.php",boxid:"RCC_marchand", width:1000,height:600}); return false;">Marchand Open</a></li>

<li><a href="#" onclick="TINY.box.show({url:"RCC_weekly_schedule.php", boxid:"RCC_schedule", width:775, height:600}); return false;">weekly schedule</a></li>

<li><a class="anchor" href="#picnic">annual picnic</a></li>

<li><a href="http://www.chessset.com/">Chess gear sale</a></li>

</ul></div>
</li>

（加えられた class="anchor" 同じページのハッシュを指すすべてのリンクに）

そしてこれをあなたのjavascriptに追加してください：

// sticky_relocate function here

// Add this function exactly from your example
function goToByScroll(id){
$("html,body").animate({scrollTop: $(id).offset().top},"slow");
}

// modify your onReady jQuery handler to this:
$(function() {
$(window).scroll(sticky_relocate);
sticky_relocate();

// Added the .anchor to the selector
$("#sticky a.anchor").click(function(){
goToByScroll($(this).attr("href"));
return false;
});
});

// your $(window).scroll goes here

それはエラーを投げずにあなたのために働くはずです。

---