スマホでメニューを開いた時点のスクロールしていた地点に、メニューを閉じたあとにもどるようにする工夫 JavaScript

最終更新日: 2024年02月15日

メニューを閉じたときに元いた位置から閲覧できるようにするためのJavascript

デフォルトではハンバーガーメニューを開くとスクロールが0にもどってしまうので、メニューを閉じたときに元いた位置から閲覧できるようにするための工夫。

$(document).ready(function() {

  var state = false;
  var scrollPos;

  $('#openMenu').on('click', function() {
    if (state === false) {
      scrollPos = $(window).scrollTop(); // クリックした時点のスクロール量
      // console.log(scrollPos);
      $('body').addClass('fixed').css({
        'top': -scrollPos
      }); // bodyを固定しスクロール量分ボディのトップを移動する

      $("nav").addClass('open');
      $("#layer").addClass('open');
      state = true;

      $('#layer').on('click', function() {
        $('body').removeClass('fixed').css({
          'top': 0
        }); // いったん0に戻して
        window.scrollTo(0, scrollPos); // ドロワーを開いたときのスクロール位置に戻す
        $('nav').removeClass('open');
        $(this).removeClass('open');
        state = false;
      });

    } else {

      $('body').removeClass('fixed').css({
        'top': 0
      }); // いったん0に戻して
      // ドロワーを開いたときのスクロール位置に戻す bodyのtopを0にするのではなくwindowをスクロールする
      window.scrollTo(0, scrollPos); 
      $('nav').removeClass('open');
      $("#layer").removeClass('open');
      state = false;
    }
  });
});

$(document).ready(function() {

var state = false;

var scrollPos;

$('#openMenu').on('click', function() {

if (state === false) {

scrollPos = $(window).scrollTop(); // クリックした時点のスクロール量

// console.log(scrollPos);

$('body').addClass('fixed').css({

'top': -scrollPos

}); // bodyを固定しスクロール量分ボディのトップを移動する

$("nav").addClass('open');

$("#layer").addClass('open');

state = true;

$('#layer').on('click', function() {

$('body').removeClass('fixed').css({

'top': 0

}); // いったん0に戻して

window.scrollTo(0, scrollPos); // ドロワーを開いたときのスクロール位置に戻す

$('nav').removeClass('open');

$(this).removeClass('open');

state = false;

});

} else {

$('body').removeClass('fixed').css({

'top': 0

}); // いったん0に戻して

// ドロワーを開いたときのスクロール位置に戻す bodyのtopを0にするのではなくwindowをスクロールする

window.scrollTo(0, scrollPos);

$('nav').removeClass('open');

$("#layer").removeClass('open');

state = false;

}

});

今回メニューを開いているときにスクロールを禁止しているのはhtmlかbodyにposition: fixed; width: 100%; height: 100%;を付与していることに因る。

JavaScriptで書いた方が見通しはいいかも。

document.addEventListener('DOMContentLoaded', (): void => {

  const body: HTMLElement | null = document.querySelector('html') || document.querySelector('body');
  const menuBtn: HTMLElement | null = document.getElementById('openMenu');
  const nav: HTMLElement | null = document.querySelector('nav');
  const layer: HTMLElement | null = document.getElementById('layer');
  let scrollPos: number = 0;

  // スクロール量を取得する関数をつくる
  function getScroll() {
    return Math.max(document.documentElement.scrollTop, document.body.scrollTop, window.scrollY);
  }

  menuBtn?.addEventListener('click', (): void => {

    if (body?.classList.contains('fixed') || nav?.classList.contains('open') || layer?.classList.contains('open')) {
      body.classList.remove('fixed');
      nav.classList.remove('open');
      layer.classList.remove('open');
    } else {
      scrollPos = getScroll();
      body?.classList.add('fixed');
      nav?.classList.add('open');
      layer?.classList.add('open');
    }

    // スクロールしていたら.fixdしているbodyのtopに数値を付与する
    if (scrollPos !== 0) {
      body?.style.top = `-${String(scrollPos)}px`;
    }

  });

  layer?.addEventListener('click', (): void => {

    body?.classList.remove('fixed');
    nav?.classList.remove('open');
    layer?.classList.remove('open');

    // スクロールしていたらwindowをスクロール前の位置まで戻す
    if (scrollPos !== 0) {
      body?.style.top = ''; // .fixedしていたbodyからtopを削除
      window.scrollTo(0, scrollPos);
    }
  });

});

document.addEventListener('DOMContentLoaded', (): void => {

const body: HTMLElement | null = document.querySelector('html') || document.querySelector('body');

const menuBtn: HTMLElement | null = document.getElementById('openMenu');

const nav: HTMLElement | null = document.querySelector('nav');

const layer: HTMLElement | null = document.getElementById('layer');

let scrollPos: number = 0;

// スクロール量を取得する関数をつくる

function getScroll() {

return Math.max(document.documentElement.scrollTop, document.body.scrollTop, window.scrollY);

}

menuBtn?.addEventListener('click', (): void => {

if (body?.classList.contains('fixed') || nav?.classList.contains('open') || layer?.classList.contains('open')) {

body.classList.remove('fixed');

nav.classList.remove('open');

layer.classList.remove('open');

} else {

scrollPos = getScroll();

body?.classList.add('fixed');

nav?.classList.add('open');

layer?.classList.add('open');

}

// スクロールしていたら.fixdしているbodyのtopに数値を付与する

if (scrollPos !== 0) {

body?.style.top = `-${String(scrollPos)}px`;

}

});

layer?.addEventListener('click', (): void => {

body?.classList.remove('fixed');

nav?.classList.remove('open');

layer?.classList.remove('open');

// スクロールしていたらwindowをスクロール前の位置まで戻す

if (scrollPos !== 0) {

body?.style.top = ''; // .fixedしていたbodyからtopを削除

window.scrollTo(0, scrollPos);

}

});

cssによるスクロール禁止だけでなくJavascriptでスマホのスクロールを禁止する方法もある。

コメントをするコメントをキャンセル

コメントはありません。