アコーディオンを開くと、クリックした場所にとどまって展開するのではなく、一番下までスクロールするという問題があります。 b/c の可能性があると思いました。競合している可能性のある他の JS がサイトにあるのですが、以下のコードペンから削除して試してみましたが、まだ同じ問題が発生しています。
更新: Codepen をテストする方法については、以下を参照してください。私が何を意味するかを見るために：
前述のように、このサイトには codepen に追加した他の JS がありますが、それを削除しても問題が引き続き発生することがわかります。
Codepen リンクを表示すると、右側に、関連のない JS がサイトの他の側面に使用されます。実際のアコーディオン Javascript は、CODEPEN の一番下 (HTML の一番下) の HTML パネルにあります。
私が見ているものを見るには:
- セクション 2 を開く
- セクション 3 まで下にスクロールしてクリックすると、セクション 3 の一番下まで自動スクロールされます。
または
- セクション 3 を開いた状態でセクション 4 を開こうとすると、
トップにとどまるのではなく、ボトムに。
最初のアコーディオンが開いているセクションに到達したときに開きたかったのですが、内側にあるものが画面の高さよりも高い場合に問題があるようです.
アコーディオン タイトル 4 をクリックすると、パネルの下部に移動するのではなく、画面上の同じポイントにとどまるようにしてください。
現在、たとえばアコーディオン 3 をクリックすると、アコーディオンの一番下に移動し、アコーディオン 3 のタイトルまでスクロールする必要があります。前述のように、パネルの高さが 100VH の高さよりも高い場合にのみ、これが行われるか、この問題が発生するようです
重要な注意: すべてのアコーディオン パネルを閉じて、1 つを開こうとすると、これが行われないようです。たとえば、ページをリロードすると、最初のアコーディオンがデフォルトで開いていて、実際のコードで連絡先フォームがある最後のアコーディオンを開こうとすると、パネルの一番下までスクロールするという問題がありました。ただし、最初のものを閉じて、それらがすべて閉じている場合、その問題はないようです
お役に立てれば幸いです。ありがとう！
下部の HTML パネル (左) のアコーディオン用の JS は
// W3C の JS コード
var acc = document.getElementsByClassName("accordion");
var i;
// 最初のアコーディオンを開く
var firstAccordion = acc[0];
var firstPanel = firstAccordion.nextElementSibling;
firstAccordion.classList.add("アクティブ");
firstPanel.style.maxHeight = firstPanel.scrollHeight + "px";
// すべてのアコーディオン要素に onclick リスナーを追加します
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function() {
// トグルの目的で、クリックされたセクションがすでに「アクティブ」であるかどうかを検出します
var isActive = this.classList.contains("アクティブ");
// すべてのアコーディオンを閉じる
var allAccordions = document.getElementsByClassName("アコーディオン");
for (j = 0; j < allAccordions.length; j++) {
// セクション ヘッダーからアクティブなクラスを削除します
allAccordions[j].classList.remove("アクティブ");
// パネルから max-height クラスを削除してパネルを閉じます
var panel = allAccordions[j].nextElementSibling;
var maxHeightValue = getStyle(panel, "maxHeight");
if (maxHeightValue !== "0px") {
panel.style.maxHeight = null;
}
}
// 三項演算子を使用してクリックされたセクションを切り替えます
アクティブです ？ this.classList.remove("アクティブ") : this.classList.add("アクティブ");
// パネル要素を切り替えます
var panel = this.nextElementSibling;
var maxHeightValue = getStyle(panel, "maxHeight");
if (maxHeightValue !== "0px") {
panel.style.maxHeight = null;
} そうしないと {
panel.style.maxHeight = panel.scrollHeight + "px";
}
};
}
// 特定の要素の計算された高さを取得するクロスブラウザの方法。 StackOverflow の @CMS の功績 (http://stackoverflow.com/a/2531934/7926565)
function getStyle(el, styleProp) {
var 値、defaultView = (el.ownerDocument || document).defaultView;
// W3C 標準の方法:
if (defaultView && defaultView.getComputedStyle) {
// プロパティ名を CSS 表記にサニタイズします
// (ハイフンで区切られた単語、例: font-Size)
styleProp = styleProp.replace(/([A-Z])/g, "-$1").toLowerCase();
return defaultView.getComputedStyle(el, null).getPropertyValue(styleProp);
} else if (el.currentStyle) { // IE
// プロパティ名をキャメルケースにサニタイズ
styleProp = styleProp.replace(/\-(\w)/g, function(str, letter) {
return letter.toUpperCase();
});
値 = el.currentStyle[styleProp];
// IE で他の単位をピクセルに変換します
if (/^\d+(em|pt|%|ex)?$/i.test(値)) {
return (関数(値) {
var oldLeft = el.style.left, oldRsLeft = el.runtimeStyle.left;
el.runtimeStyle.left = el.currentStyle.left;
el.style.left = 値 || 0;
値 = el.style.pixelLeft + "px";
el.style.left = oldLeft;
el.runtimeStyle.left = oldRsLeft;
戻り値;
}）（価値）;
}
戻り値;
}
}
これは回避策であり、機能しますが、非常にスムーズではありません。コンテンツが非常に長いため、クリック可能な要素が常に同じ場所にある方法に変更する必要があると思います.たとえば、アコーディオンの代わりにタブを使用すると、タブが常に上に表示され、コンテンツが下に切り替えられます。
ここにあります:
各アコーディオンに id を追加します。例:
などなど..
このコードを acc[i].onclick = function() { } の関数内の任意の場所に追加します
setTimeout(() => {
location.href = "#" + アコーディオン[i].id;
}、200);
たとえば location.href = "#someid" を使用すると、ブラウザはその ID を持つ要素を表示するようにページを配置します。