トップメニューを位置のdivとして追加しました:固定。ページの上部に配置されるため、コンテンツの一部をカバーします。レイアウトを下に移動したので、通常は問題ありませんが、ユーザーがアンカー リンクをクリックすると、アンカーが一番上にある場所までページがスクロールされます。しかし、それはトップメニューでカバーされています。アンカー イベントをキャッチし、javascript (および必要に応じて jQuery) で処理する方法はありますか?
質問する
1866 次
3 に答える
2
次のようなものを使用できます。
$('a').click(function(){
$('html').scrollTop($($(this).attr('href')).position().top + menu_height_offset)
})
アンカー位置を取得するには
$($(this).attr('href')).position().top
オフセットを固定メニューに関連付けるには
menu_height_offset
スクロールを動かすには
$('html').scrollTop()
于 2012-09-05T18:34:05.057 に答える
1
要素のオフセットを計算し、offset of element - height of the navigationbar
-位置までロールする必要があります。
$("a").on("click",function(){
// height of the navigation bar
var height= $("#nav").outerHeight();
// position of the referenced dom-element
var pos = $($(this).attr("href")).position().top;
// scroll to the element
$("body").scrollTop(pos - height);
// suppress default
return false;
})
于 2012-09-05T18:53:16.747 に答える
0
/* START --- scroll till anchor */
(function($) {
$.fn.goTo = function() {
var top_menu_height=$('#div_menu_header').height() + 5 ;
//alert ( 'top_menu_height is:' + top_menu_height );
$('html, body').animate({
scrollTop: (-1)*top_menu_height + $(this).offset().top + 'px'
}, 500);
return this; // for chaining...
}
})(jQuery);
$(document).ready(function(){
var url = document.URL, idx = url.indexOf("#") ;
var hash = idx != -1 ? url.substring(idx+1) : "";
$(window).load(function(){
// Remove the # from the hash, as different browsers may or may not include it
var anchor_to_scroll_to = location.hash.replace('#','');
if ( anchor_to_scroll_to != '' ) {
anchor_to_scroll_to = '#' + anchor_to_scroll_to ;
$(anchor_to_scroll_to).goTo();
}
});
});
/* STOP --- scroll till anchror */
于 2015-03-21T16:37:21.387 に答える