質問: 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
回答: 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()関数内のオプションをサポートしていないため、アニメーションスクロールは表示されません。