7

私は自分のサイトにCSSTricksSmooth Page Scrollを実装しましたが、それはかなりうまく機能しています。ただし、ページの上部に固定ナビゲーションがあるため、ページを適切なアンカーdivにスクロールすると、divの上部がナビゲーションの後ろに表示されなくなります。div全体が表示されるようにスクロール（約70px）をオフセットするにはどうすればよいですか？私はこれをやってみました： 

var targetOffset = $target.offset().top - 70;

しかし、それはうまくいきません。ページは適切な場所にスクロールしますが、すぐに元に戻り、divの上部が非表示になります。私は何が欠けていますか？完全なコードは次のとおりです。

$(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');

    // Any links with hash tags in them (can't do ^= because of fully qualified URL potential)
    $('a[href*=#]').each(function() {

        // Ensure it's a same-page link
        var thisPath = filterPath(this.pathname) || locationPath;
        if (  locationPath == thisPath
            && (location.hostname == this.hostname || !this.hostname)
            && this.hash.replace(/#/,'') ) {

                // Ensure target exists
                var $target = $(this.hash), target = this.hash;
                if (target) {

                    // Find location of target
                    var targetOffset = $target.offset().top - 70;
                    $(this).click(function(event) {

                        // Prevent jump-down
                        event.preventDefault();

                        // Animate to target
                        $(scrollElem).animate({scrollTop: targetOffset}, 400, function() {

                            // Set hash in URL after animation successful
                            location.hash = target;

                        });
                    });
                }
        }

    });


    // Use the first element that is "scrollable"  (cross-browser fix?)
    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 [];
    }

});

よろしくお願いします。

4

4 に答える 4

14

これは常に起こります。私は答えを検索して検索し、イライラし、助けを求める質問を投稿し、すぐに私の問題に対する答えを見つけます。馬鹿な。とにかく、これが同じ問題を抱えているかもしれない人のための解決策です。

たとえば、オフセットを70px変更する場合は、コードを次のように変更します。

var targetOffset = $target.offset().top - 70;

ただし、コードからこの行を削除しない限り...

location.hash = target;

...ページは適切な場所にスクロールし、すぐに上にジャンプして、divの上部がヘッダーの後ろに隠れるようにします。上記の行をコードから削除すると、ページ上のユーザーの位置を反映するようにURLが変更されなくなるという事実を除いて、すべてがうまく機能します。

URLを変更したい場合（そしてこれは使いやすさの目的で良い考えだと思います）、あなたがしなければならないのはアンカーdivのCSSを変更することだけです。padding-topに正の値を追加し、margin-topに負の値を追加します。例えば：

#anchor-name {
padding-top: 70px;
margin-top: -70px;
}

私は3つのdivしかないので、そのCSSをそれぞれに接続するだけで、すべてが機能しました。ただし、アンカーdivが多数ある場合は、.anchorのクラスを作成し、そこにCSSを配置して、適切なすべてのdivにクラスを適用することを検討してください。

これがお役に立てば幸いです。

于 2012-11-08T17:48:42.370 に答える
9

私は以下のコードでそのような種類の問題を修正しました：

作業デモはこちら。サイドバーの「トピックの投稿」セクションとメインコンテンツ領域のコンテンツで遊ぶことができます。

コード

jQuery(function() {
  jQuery('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {

      var target = jQuery(this.hash);
      target = target.length ? target : jQuery('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        jQuery('html,body').animate({
          scrollTop: target.offset().top -100
        }, 1000);
        return false;
      }
    }
  });
});
于 2014-01-06T13:53:54.400 に答える
1

https://codepen.io/pikeshmn/pen/mMxEdZを参照してください

アプローチ：document.getElementById（'header'）。offsetHeightを使用して固定ナビゲーションの高さを取得し 、スクロールをこの値にオフセットします。

var jump=function(e){  

e.preventDefault();                        //prevent "hard" jump
  var target = $(this).attr("href");       //get the target

      //perform animated scrolling
      $('html,body').animate(
        {
          scrollTop: $(target).offset().top - document.getElementById('header').offsetHeight - 5  //get top-position of target-element and set it as scroll target
        },1000,function()                  //scrolldelay: 1 seconds
        {
          location.hash = target;          //attach the hash (#jumptarget) to the pageurl
        });
      }

  $(document).ready(function()
  {
    $('a[href*="#"]').bind("click", jump); //get all hrefs
    return false;
  });
于 2017-08-20T09:30:32.087 に答える
0

実際には、そのためのCSSルールがあります: :)もちろん、最上位の要素のscroll-padding-top通常のルールと組み合わせます。padding-top

cf. https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-padding-top

于 2021-11-06T10:39:14.983 に答える