0

基本的に、私は単一ページの 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;
     });
  }
}
4

1 に答える 1