web-dev-qa-db-ja.com

1ページのサイトでスムーズスクロールメニューのアンカーを作成するにはどうすればよいですか？

Joomla 3.xで作成したWebサイトを持っていて、メニュー（Agence、Regie Pub、Sites Internet、Autres Services、Realizations、Contact）を作成しました。それぞれをクリックすると、ページのセクションにスムーズにリダイレクトされます。以前はPLUGINARIAの拡張スムーススクロールアンカーを使用していましたが、現在は無料ではないため、彼は動作しません。次に、テンプレートhelix 3 FrameworkでカスタムJavaScriptファイルを作成して、独自のスムーズスクロールを作成します。

これは私のメニューのコードです：

<div class="sp-megamenu-wrapper">
   <a id="offcanvas-toggler" class="visible-sm visible-xs" href="#">
      <i class="fa fa-bars"></i>
   </a>
   <ul class="sp-megamenu-parent menu-fade hidden-sm hidden-xs">
      <li class="sp-menu-item current-item active"></li>
         <li class="sp-menu-item">
            <a class="scrollTo" href="#agence">Agence</a>
         </li>
         <li class="sp-menu-item">
            <a class="scrollTo" href="#regie-pub">Régie pub</a>
         </li>
         <li class="sp-menu-item">
            <a class="scrollTo" href="#sites-internet">Sites internet</a>
         </li>
         <li class="sp-menu-item">
            <a class="scrollTo" href="#autres-services">Autres services</a>
         </li>
         <li class="sp-menu-item">
            <a class="scrollTo" href="#realisations">Réalisations</a>
         </li>
         <li class="sp-menu-item">
            <a class="scrollTo" href="#contact">Contact</a>
         </li>
   </ul>

私が持っているこの種のメニューでどうすればそれができるのか知りたいです。ワンページサイトの別のセクションにスクロールアンカーをスムーズにするにはどうすればよいですか。

よろしく、Lordaker

joomla-3.xextensionscustom-action
2
lordaker

Aa Vanilla Javascript（jQueryより高速）のアプローチは次のようになります。

_document.addEventListener('DOMContentLoaded', function () {
    function scrollTo(event) {
        event.preventDefault();

        var id = event.target.getAttribute('href').replace('#', '');
        var el = document.getElementById(id);

        if (el) {
            el.scrollIntoView({behavior: 'smooth', block: 'start'});
        }
    }

    var menuLinks = document.querySelectorAll('.scrollTo');

    if (menuLinks.length > 0) {
        for (var i = 0; i < menuLinks.length; i++) {
            menuLinks[i].addEventListener('click', scrollTo);
        }
    }
}
_

Internet ExplorerとSafariでは、これらのブラウザーのどちらもscrollIntoView()関数内のオプションをサポートしていないため、アニメーションスクロールは表示されません。

1
Lodder

私が使用するこのJavaScriptコード：

    //Smooth Scroll Menu
    $(document).ready(function(){

    $('ul.sp-megamenu-parent li.sp-menu-item > a').on('click', function(){

       //Toggle Class
       $(".active").removeClass("active");    
       $(this).closest('li').removeClass("active");
       var theClass = $(this).attr("class");
       $('.'+theClass).parent('li').addClass('active');

       //Animate
       $('html, body').stop().animate({
          scrollTop: $( $(this).attr('href') ).offset().top - 0
       }, 450);

       return false;

    });
});
0
lordaker