web-dev-qa-db-ja.com

アンカーへのjQueryスクロール（マイナスの設定ピクセル数）

次のコードを使用して、jQueryでアンカーポイントまでスクロールします。

$(document).ready(function() {
  function filterPath(string) {
  return string
    .replace(/^\//,'')
    .replace(/(index|default).[a-zA-Z]{3,4}$/,'')
    .replace(/\/$/,'');
  }
  var locationPath = filterPath(location.pathname);
  var scrollElem = scrollableElement('html', 'body');

  $('a[href*=#]').each(function() {
    var thisPath = filterPath(this.pathname) || locationPath;
    if (  locationPath == thisPath
    && (location.hostname == this.hostname || !this.hostname)
    && this.hash.replace(/#/,'') ) {
      var $target = $(this.hash), target = this.hash;
      if (target) {
        var targetOffset = $target.offset().top;
        $(this).click(function(event) {
          event.preventDefault();
          $(scrollElem).animate({scrollTop: targetOffset}, 400, function() {
            location.hash = target;
          });
        });
      }
    }
  });

  // use the first element that is "scrollable"
  function scrollableElement(els) {
    for (var i = 0, argLength = arguments.length; i <argLength; i++) {
      var el = arguments[i],
          $scrollElement = $(el);
      if ($scrollElement.scrollTop()> 0) {
        return el;
      } else {
        $scrollElement.scrollTop(1);
        var isScrollable = $scrollElement.scrollTop()> 0;
        $scrollElement.scrollTop(0);
        if (isScrollable) {
          return el;
        }
      }
    }
    return [];
  }

});

とにかく、そのアンカーまでスクロールするが、ピクセルの設定量をマイナスにする方法はありますか？ （私の場合、-92pxにしたい）

助けてくれてありがとう。

jqueryscrollanchor
30
John

私はこの問題を自分で解決しなければなりませんでした。 scrollToするピクセルの量によってオフセットを調整する必要があります。私の場合、ページ上で50ピクセル高くする必要がありました。そこで、targetOffsetから50を引きました。

さて、コードの中でぐらぐらしている部分はlocation.hashです。これは、特定のポイントに位置を設定するようにブラウザに指示しています。すべての場合において、これはスクロールしたばかりのIDを含む文字列です。したがって、「＃foo」のようなものになります。これを維持する必要があるため、そのままにします。

ただし、location.hashが設定されている場合（デフォルトのブラウザーアクション）にブラウザーが「ジャンプ」するのを防ぐには、単にデフォルトアクションを防ぐ必要があります。したがって、アニメーション関数の完了関数にイベント「e」を渡します。次に、e.preventDefault（）を呼び出します。ブラウザが実際にイベントを呼び出していることを確認する必要があります。そうでなければ、エラーが発生します。したがって、if-testで修正されます。

できた修正されたコードチャンクは次のとおりです。

if (target) {
    var targetOffset = $target.offset().top - 50;
    $(this).click(function(event) {
      if(event != 'undefined') {
          event.preventDefault();}
      $(scrollElem).animate({scrollTop: targetOffset}, 400, function(e) {
          e.preventDefault();
          location.hash = target;
      });
    });
  }
31
Jonathan Savage

これは私が使用するものです：

function scrollToDiv(element){
    element = element.replace("link", "");
    $('html,body').unbind().animate({scrollTop: $(element).offset().top-50},'slow');
};

... where 50は、加算/減算するピクセル数です。

18
kaleazy

このコードは、私のサイトのリンクアンカーで、上部の修正メニューの高さ「150px」を尊重します。

<!-- SMOOTH SCROLL -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(function() {
  $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top-150
        }, 1000);
        return false;
      }
    }
  });
});
</script>
<!-- End of SMOOTH SCROLL -->
13
Max

笑）

<span class="anchor" id="section1"></span>
<div class="section"></div>

<span class="anchor" id="section2"></span>
<div class="section"></div>

<span class="anchor" id="section3"></span>
<div class="section"></div>

<style>
.anchor{
  display: block;
  height: 115px; /*same height as header*/
  margin-top: -115px; /*same height as header*/
  visibility: hidden;
}
</style>
5
Никита Андрейчук

エラーなしでイベントコールバックをanimate（）に渡すことができなかったため、ジョナサンサベージのソリューションを使用できませんでした。私は今日この問題を抱えていて、簡単な解決策を見つけました。

      var $target = $(this.hash), target = this.hash;
      if (target) {
        var targetOffset = $target.offset().top - 92;
        $(this).click(function(event) {
          event.preventDefault();
          $(scrollElem).animate({scrollTop: targetOffset}, 400, function() {
            location.hash = targetOffset;
          });
        });

TargetOffset変数からピクセルオフセットを減算し、location.hashをその変数に割り当てます。ターゲットハッシュまでスクロールするときにページのジャンプを停止します。

1
vibrationbaby

これは私が使用するjQueryスニペットであり、非常にリソースが豊富で柔軟です。推奨されるフッターで実行する場合、DOM Readyを削除できます。事前に1.4v以降のライブラリをロードしてください。アンカーのすべてのクリックをリッスンし、クラスチェックのためにブール値とORを実行します。クラスが見つかった場合は、スクリプトとアニメーションを実行します。終了位置は、ほとんどのアプリケーションで60pxを好みますが、必要に応じて自由に調整してください。

<!--jQuerySmoothScroll-->
<script>
jQuery(document).ready(function(){
        // Add smooth scrolling to all links
        jQuery("a").on('click', function(event) {
      //check that we have the smooth-scroll class add as many as need be
            if (jQuery(this).hasClass("whatever-class-you-want") || jQuery(this).hasClass("smooth-scroll")) {
                        // Make sure this.hash has a value before overriding default behavior
                                        if (this.hash !== "") {
                                        // Prevent default anchor click behavior
                                event.preventDefault();
                        // Store hash
                        var hash = this.hash;
                // Using jQuery's animate() method to add smooth page scroll
                // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
        jQuery('html, body').animate({
        scrollTop: jQuery(hash).offset().top-60// Set offset from top position
       }, 800, function(){
   
        // Add hash (#) to URL when done scrolling (default click behavior)
        window.location.hash = hash;
      });
     } // End if
    } // End if (class)
  });
});
</script>
1
Garrick Crouch

ここに私が使用しているものがあります。オフセットを必要なものに設定します。

$('a[href^="#"]').click(function(e) {
  e.preventDefault();
  $(window).stop(true).scrollTo(this.hash {duration:1000,interrupt:true,offset: -50});
});
0
cdrck

これは、НикитаАндрейчукのソリューションに基づいた、私が使用するjQuery実装です。この例ではハードコードされていますが、ピクセル調整変数はこの方法で動的に設定できます。

$( 'a' ).each(function() {
    var pixels = 145;
    var name = $( this ).attr( 'name' );
    if ( typeof name != 'undefined' ) {
        $( this ).css({
          'display'    : 'block',
          'height'     : pixels + 'px',
          'margin-top' : '-' + pixels + 'px',
          'visibility' : 'hidden'
        });
    }
});
0
Jeremy Morgan