基本的に、私は単一ページの Web サイトを作成し、 JQueryを使用してさまざまなリンクをクリックしたときにScrollTo効果を作成しました。ページの上部に固定 div があるため、ターゲットをページ上部の固定 div の高さにオフセットして、スクロール時にコンテンツが固定 div によって隠れないようにしました。ページの上部:
if ($target) {
var targetOffset = $target.offset().top - $("#div_at_top_of_page").outerHeight();
これは問題なく動作し、ページの上部にある固定ナビゲーションの下のターゲット div をスクロールします。ただし、Safariでは、スクロールはデフォルトですでにdivの下にスクロールしているため、次を追加します。
$("#div_at_top_of_page").outerHeight();
これにより、Safari はターゲットまでスクロールしますが、ページの上部に div の高さを追加してマージンを作成します。
これをキャンセルするための解決策を探しています:
$("#div_at_top_of_page").outerHeight()
サファリ専用。どんな助けでも大歓迎です、ありがとう!
編集:ブラウザの検出ではなく、他のソリューションを受け入れます。
完全なものは次のとおりです。
$(document).ready(function() {
function filterPath(string) {
return string
.replace(/^\//,'')
.replace(/(index|default).[a-zA-Z]{3,4}$/,'')
.replace(/\/$/,'');
}
$('a[href*=#]').each(function() {
if ( filterPath(location.pathname) == filterPath(this.pathname)
&& location.hostname == this.hostname
&& this.hash.replace(/#/,'') ) {
var $targetId = $(this.hash), $targetAnchor = $('[name=' + this.hash.slice(1) +']');
var $target = $targetId.length ? $targetId : $targetAnchor.length ? $targetAnchor : false;
if ($target) {
var targetOffset = $target.offset().top - $("#fixed_div_at_top").outerHeight();
$(this).click(function(e) {
$('html, body').animate({scrollTop: targetOffset}, 800);
e.preventDefault();
var d = document.createElement();
d.style.height = "101%";
d.style.overflow = "hidden";
document.body.appendChild(d);
window.scrollTo(0,scrollToM);
setTimeout(function() {
d.parentNode.removeChild(d);
}, 10);
return false;
});
}
}