모바일에서 input을 클릭했을때 스크롤을 내리게 하고싶습니다~ 채택완료

안녕하세요.

로그인을 할 때, 아이디 input에다가 입력을 할 때 (클릭할떄) 스크롤이 ID input만큼 내려오게 설정했습니다.

        <div class="frmWrap">

            <div class="frmItem">

                <div class="label">아이디</div>

                <input type="text" name="mb_id" class="txtBox id-txtBox" value="<?=$mb_id;?>" autofocus placeholder="">

            </div>

            <div class="frmItem">

                <div class="label">비밀번호</div>

                <input type="password" name="mb_password" value="<?=$mb_password;?>" class="txtBox pw-txtBox" placeholder="(영문대소문자/숫자/특수문자 중 2가지 이상조합, 8-16자)">

            </div>

        </div>

    $(function(){

        const $id = $(".id-txtBox");

        $id.click(function(){

            const id_top = $id.offset().top;

            $("html, body").scrollTop(id_top);

        });

    });

    $(function(){

        const $pw = $(".pw-txtBox");

        $pw.click(function(){

            const pw_top = $pw.offset().top;

            $("html, body").scrollTop(pw_top);

        });

    });

이렇게요!

근데.. 모바일에서는 input을 두번눌러야 스크롤이 내려가네요 ㅠㅠ 방법이있을까요?