채택완료

그누보드 모바일 사이드메뉴 상단이동

2022-06-02 (목) 12:35:09 1,973

2943663001_1654140829.5586.jpg

가능할지 모르겠지만..

모바일 사이드메뉴에 상단으로 올리는 고정된 투명화 버튼을 구현하고 싶습니다

모바일 메뉴가 많아져서 내렸다가 다시 올리는게 조금 번거로워져서

한번에 상단메뉴로 다시 올라가는 버튼을 만들고자 하는데 고수님들 도움 부탁드립니다

|

답변 1개 / 댓글 2개

채택된 답변
+20 포인트

style 에서 position과 z-index가 중요하고 bottom과 right 로 위치(아래 예는 우측 하단) 조정 하면 됩니다.
그리고 button 잘보이게 css 먹이시면 되시구요.한번 응용해서보세요.

Copy
<style>
#move_top{position: fixed;bottom: 20px;right: 20px;z-index: 99999;width: 50px;height: 50px;}
</style>


<button type="button" id="move_top">↑</button>

    <script>

        $("#move_top").on("click", function() {
            $("html, body").animate({scrollTop:0}, '300');
            return false;
        });
    </script>

답변에 대한 댓글 2개

Dessi 님 매번 감사드립니다!
적용해봤더니 실제 우측하단에 보이긴하는데 이게 사이드바 내에 생기는게 아니네요...
그래서 전체페이지가 이동되고..

사이드메뉴쪽만 상단으로 올리고싶은데 방법이 없을까요?
제가 실문을 자세하게 못보았네요 ㅠㅠ

저 코드가 html 문서를 상단으로 넘기는거라 사이드 메뉴내에서 해결할려면 조금더 심화적인 코드가 필요할것 같습니다.

저걸 사이드메뉴에 넣고 css 선택자를 바꾼다고 해도 html 바디가 올라가겠네요.

답변을 작성하려면 로그인이 필요합니다.