JavaScriptで内部リンクをスムーズにスクロールします

このアプローチは、目立たないDHTMLの原則に従っており、誰もが簡単に使用できるようにします。ソリューションが機能するには、スクリプトに何かが実行される必要があります。コードを最初のステップ（リンクの上にループするために内部のものを見つける）を関数ss_fixalllinks（）に配置し、スコットアンドリューの関数を使用してそれをウィンドウのオンロードイベントにバインドします：

ss_addEvent(window,"load",ss_fixAllLinks);

コード全体が次のようになります：

function ss_fixAllLinks() {   

  // Get a list of all links in the page   

  var allLinks = document.getElementsByTagName('a');   

  // Walk through the list   

  for (var i=0;i
    var lnk = allLinks[i];   

    if ((lnk.href && lnk.href.indexOf('#') != -1) &&    

        ( (lnk.pathname == location.pathname) ||   

    ('/'+lnk.pathname == location.pathname) ) &&    

        (lnk.search == location.search)) {   

      // If the link is internal to the page (begins in #)   

      // then attach the smoothScroll function as an onclick   

      // event handler   

      ss_addEvent(lnk,'click',smoothScroll);   

    }   

  }   

}   

   

function smoothScroll(e) {   

  // This is an event handler; get the clicked on element,   

  // in a cross-browser fashion   

  if (window.event) {   

    target = window.event.srcElement;   

  } else if (e) {   

    target = e.target;   

  } else return;   

     

  // Make sure that the target is an element, not a text node   

  // within an element   

  if (target.nodeType == 3) {   

    target = target.parentNode;   

  }   

     

  // Paranoia; check this is an A tag   

  if (target.nodeName.toLowerCase() != 'a') return;   

     

  // Find the  tag corresponding to this href   

  // First strip off the hash (first character)   

  anchor = target.hash.substr(1);   

  // Now loop all A tags until we find one with that name   

  var allLinks = document.getElementsByTagName('a');   

  var destinationLink = null;   

  for (var i=0;i
    var lnk = allLinks[i];   

    if (lnk.name && (lnk.name == anchor)) {   

      destinationLink = lnk;   

      break;   

    }   

  }   

     

  // If we didn't find a destination, give up and let the browser do   

  // its thing   

  if (!destinationLink) return true;   

     

  // Find the destination's position   

  var destx = destinationLink.offsetLeft;    

  var desty = destinationLink.offsetTop;   

  var thisNode = destinationLink;   

  while (thisNode.offsetParent &&    

        (thisNode.offsetParent != document.body)) {   

    thisNode = thisNode.offsetParent;   

    destx += thisNode.offsetLeft;   

    desty += thisNode.offsetTop;   

  }   

     

  // Stop any current scrolling   

  clearInterval(ss_INTERVAL);   

     

  cypos = ss_getCurrentYPos();   

     

  ss_stepsize = parseInt((desty-cypos)/ss_STEPS);   

  ss_INTERVAL = setInterval('ss_scrollWindow('+ss_stepsize+','+desty+',"'+anchor+'")',10);   

     

  // And stop the actual click happening   

  if (window.event) {   

    window.event.cancelBubble = true;   

    window.event.returnValue = false;   

  }   

  if (e && e.preventDefault && e.stopPropagation) {   

    e.preventDefault();   

    e.stopPropagation();   

  }   

}   

   

function ss_scrollWindow(scramount,dest,anchor) {   

  wascypos = ss_getCurrentYPos();   

  isAbove = (wascypos < dest);   

  window.scrollTo(0,wascypos + scramount);   

  iscypos = ss_getCurrentYPos();   

  isAboveNow = (iscypos < dest);   

  if ((isAbove != isAboveNow) || (wascypos == iscypos)) {   

    // if we've just scrolled past the destination, or   

    // we haven't moved from the last scroll (i.e., we're at the   

    // bottom of the page) then scroll exactly to the link   

    window.scrollTo(0,dest);   

    // cancel the repeating timer   

    clearInterval(ss_INTERVAL);   

    // and jump to the link directly so the URL's right   

    location.hash = anchor;   

  }   

}   

   

function ss_getCurrentYPos() {   

  if (document.body && document.body.scrollTop)   

    return document.body.scrollTop;   

  if (document.documentElement && document.documentElement.scrollTop)   

    return document.documentElement.scrollTop;   

  if (window.pageYOffset)   

    return window.pageYOffset;   

  return 0;   

}   

   

function ss_addEvent(elm, evType, fn, useCapture)   

// addEvent and removeEvent   

// cross-browser event handling for IE5+,  NS6 and Mozilla   

// By Scott Andrew   

{   

  if (elm.addEventListener){   

    elm.addEventListener(evType, fn, useCapture);   

    return true;   

  } else if (elm.attachEvent){   

    var r = elm.attachEvent("on"+evType, fn);   

    return r;   

  }   

}    

   

var ss_INTERVAL;   

var ss_STEPS = 25;   

   

ss_addEvent(window,"load",ss_fixAllLinks);

ラッピング

ドキュメント内部リンクは目的地にスクロールし、ユーザーがドキュメント内のブラウザがどこにあるか、および出発点からどれだけ離れているかについての認識を保持できるようにします。コードはテストされ、Mozilla、IE、およびOperaで機能しています。 Konquerorでは機能せず、他のブラウザでは機能しないと想定されています。 JavaScript

を使用した滑らかなスクロールに関するよくある質問（FAQ）

JavaScriptにスムーズなスクロールを実装するにはどうすればよいですか？

​​

JavaScriptでスムーズなスクロールを実装するには、window.scrolltoメソッドを使用することが含まれます。この方法では、X座標とウィンドウがスクロールするy座標の2つの引数が必要です。スクロールをスムーズにするには、動作プロパティを使用して「スムーズ」に設定できます。簡単な例を次に示します：

window.scrollto（{
> top：0、
動作： 'smooth'
}）;
このコードは、ページの上部にスムーズにスクロールします。ページ上。これを行うには、最初にdocument.queryselectorなどのメソッドを使用して要素を選択し、次に選択した要素でscrollintoviewメソッドを使用します。例は次のとおりです。

var element = document.queryselector（ '＃myElement'）;

element.scrollintoview（{behavior： 'smooth'}）;

このコードは、ID「myElement」で窓をスムーズにスクロールします。 JavaScriptは、Chrome、Firefox、Safari、Edgeなど、ほとんどの最新のブラウザでサポートされています。ただし、Internet Explorerによってサポートされていません。 MDN Webドキュメントの互換性テーブルを最新情報を確認できます。

スムーズなスクロールの速度を制御できますか？ただし、Window.RequestanimationFrameメソッドを使用して、設定速度でカスタムスムーススクロール機能を作成できます。

アンカーリンク用のJavaScriptを使用してスムーズなスクロールを実装するにはどうすればよいですか？

リンク上の「クリック」イベントのイベントリスナーを追加することで、アンカーリンクのスムーズなスクロールを実装できます。イベントハンドラーでは、ターゲット要素に即座にナビゲートし、代わりにScrollIntoViewメソッドを使用してターゲット要素にスムーズにスクロールすることであるリンクのデフォルトアクションを防ぐことができます。例は次のとおりです。
document.queryselectorall（ 'a [href^= "＃"]'）。 document.QuerySelector（this.getAttribute（ 'href'））。scrollintoview（{
> beavior： 'smooth'
}）;
}）;
}）;
このコードは、ページのすべてのアンカーリンクにスムーズなスクロールを追加します。
はい、JavaScriptを使用してスムーズなスクロールを使用するときにスクロールオフセットを追加できます。これを行うことができます。ScrollToメソッドのY座標またはScrollIntoViewメソッドの上部プロパティから目的のオフセットを差し引くことで、jQueryを使用してスムーズなスクロールを実装できますか？ jQueryは、HTML要素とボディ要素のスクロールトッププロパティをアニメーション化するために使用できるアニメーションメソッドを提供します。例は次のとおりです。

$（ 'html、body'）。animate（{}、2000）;
JavaScript？

はい、スクロールビハビオールプロパティを使用して、CSSを使用してスムーズなスクロールを実装できます。このプロパティをHTMLまたはボディ要素で「スムーズ」に設定して、ページ全体のスムーズなスクロールを可能にすることができます。ただし、この方法はJavaScriptメソッドよりもブラウザのサポートが少なくなります。

スムーズなスクロールが正しく機能しているかどうかをテストするにはどうすればよいですか？スクロールが滑らかで瞬時ではない場合は、正しく機能しています。ブラウザの開発者ツールを使用して、スクロールの動作を検査することもできます。

javaScriptでスムーズなスクロールを無効にすることはできますか？これにより、スクロールは滑らかではなく瞬時になります

以上がJavaScriptで内部リンクをスムーズにスクロールしますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。