REFACTOR
article thumbnail
Published 2018. 1. 21. 01:40
19. JavaScript Ex.18 맨 위로 가기(TOP)/상단바 고정 이전 글/JavaScript

본 글은 HTML5, CSS 학습한 상태에서 작성한 글입니다.











스크롤을 내려도 상단 메뉴바가 그대로 유지되서 스크롤 되는 것과


맨위로가기 버튼을 통하여 하단에 내려가도 버튼 하나로 상단으로 접근 할 수 있는 버튼을 구현하였다.




1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<body>
    <div class="top-container">
        <h1>TOP</h1>
        <p>Lorem ipsum dolor sit amet.</p>
    </div>
    <div id="myheader" class="header">
        <h2>menus</h2>
    </div>
    <div class="content">
        <h3>scroll sticky menus</h3>
        <p>Lorem ipsum dolor sit amet.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut eius sed sunt molestiae minus
         cupiditate vero eligendi quasi deserunt quas vitae voluptatibus ex fuga praesentium esse culpa hic exercitationem perferendis.</p>
        <p>Maiores veniam possimus temporibus natus eaque quas molestias minus voluptate nisi velit 
        quibusdam accusantium fugiat excepturi ipsum asperiores! Minus blanditiis consequatur eum libero repellendus similique ipsum autem aliquam a error!</p>
        <p>Ut ducimus fuga odio architecto consequatur deserunt tempore laboriosam facere repellat officiis.
         Perferendis explicabo aliquam totam excepturi provident asperiores sint nostrum eveniet nesciunt blanditiis ut vel ipsum sapiente ducimus pariatur.</p>
        <p>Ab odit labore voluptatibus fuga quibusdam perferendis officia obcaecati omnis perspiciatis 
        animi id maxime minus velit tempora distinctio consequatur fugit maiores eos doloribus expedita. Ab eum natus eveniet necessitatibus unde!</p>
        <p>Blanditiis in fuga libero delectus dignissimos placeat explicabo expedita vero eius corrupti 
        dolore cupiditate facere animi architecto aperiam consectetur tenetur accusamus minus consequatur perferendis modi et ducimus? Itaque est labore.</p>
        <p>Neque cumque quaerat sequi ipsam nisi reprehenderit earum magni quia porro similique facere 
        omnis maiores voluptatibus pariatur inventore adipisci dolor iure dicta. Necessitatibus consequuntur magni odit error optio veniam nesciunt!</p>
        <p>Fugit dignissimos numquam nostrum officia officiis inventore aliquam consequatur quia! Magnam 
        reprehenderit ab praesentium atque est voluptates sed fugiat repellat vel ipsam quod voluptatibus. Cum omnis molestiae hic rem nam.</p>
        <p>Rem quia ducimus aliquid iure sit at temporibus laborum quibusdam minus porro deleniti a iusto officiis.
         Repudiandae amet nostrum dolores hic mollitia cumque quos itaque atque laboriosam qui provident quas.</p>
        <p>Laboriosam ut impedit amet fuga fugit corporis aliquid officia quasi molestiae illo eligendi tempore doloribus aut.
         Ad animi dolores fuga ut nobis eos rerum nostrum laborum vel eligendi hic cupiditate.</p>
        <p>Nobis ipsam aut tenetur pariatur dicta quisquam earum rerum quos eaque quasi. Suscipit sapiente tenetur asperiores
         culpa nisi vel corporis repellendus nihil ratione a nesciunt nulla fugit eos. Numquam quia.</p>
        <p>Fugit dignissimos numquam nostrum officia officiis inventore aliquam consequatur quia! Magnam reprehenderit ab 
        praesentium atque est voluptates sed fugiat repellat vel ipsam quod voluptatibus. Cum omnis molestiae hic rem nam.</p>
        <p>Rem quia ducimus aliquid iure sit at temporibus laborum quibusdam minus porro deleniti a iusto officiis. Repudiandae 
        amet nostrum dolores hic mollitia cumque quos itaque atque laboriosam qui provident quas.</p>
        <p>Laboriosam ut impedit amet fuga fugit corporis aliquid officia quasi molestiae illo eligendi tempore doloribus aut. 
        Ad animi dolores fuga ut nobis eos rerum nostrum laborum vel eligendi hic cupiditate.</p>
        <p>Nobis ipsam aut tenetur pariatur dicta quisquam earum rerum quos eaque quasi. Suscipit sapiente tenetur asperiores
         culpa nisi vel corporis repellendus nihil ratione a nesciunt nulla fugit eos. Numquam quia.</p>
        <p>Fugit dignissimos numquam nostrum officia officiis inventore aliquam consequatur quia! Magnam reprehenderit 
        ab praesentium atque est voluptates sed fugiat repellat vel ipsam quod voluptatibus. Cum omnis molestiae hic rem nam.</p>
        <p>Rem quia ducimus aliquid iure sit at temporibus laborum quibusdam minus porro deleniti a iusto officiis. Repudiandae 
        amet nostrum dolores hic mollitia cumque quos itaque atque laboriosam qui provident quas.</p>
        <p>Laboriosam ut impedit amet fuga fugit corporis aliquid officia quasi molestiae illo eligendi tempore doloribus aut. 
        Ad animi dolores fuga ut nobis eos rerum nostrum laborum vel eligendi hic cupiditate.</p>
        <p>Nobis ipsam aut tenetur pariatur dicta quisquam earum rerum quos eaque quasi. Suscipit sapiente tenetur asperiores 
        culpa nisi vel corporis repellendus nihil ratione a nesciunt nulla fugit eos. Numquam quia.</p>
    </div>
    <button id="myBtn" title="Go to top">Top</button>
</body>
cs

<body>





1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<style>
body {
    margin: 0;
    font-family: Arial
}
.top-container {
    background-color: #f1f1f1;
    padding: 30px;
    text-align: center;
}
.header {
    padding: 10px 16px;
    background: #555;
    color: #f1f1f1;
}
.content {
    padding: 16px;
}
.sticky {
    position: fixed;
    top: 0;
    width: 100%;
}
.sticky+.content {
    padding-top: 102px;
}
#myBtn {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 30px;
    z-index: 99;
    border: none;
    outline: none;
    background-color: red;
    color: white;
    cusor: pointer;
    padding: 15px;
    border-radius: 10px;
}
#myBtn:hover {
    background-color: #555;
}
</style>



s

<style>



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<script type="text/javascript">
        var header = document.getElementById("myheader");
        var oTop = header.offsetTop;
        window.onscroll = function() {
            if (window.pageYOffset >= oTop) {
                header.classList.add("sticky");
            } else {
                header.classList.remove("sticky");
            }
            // window.pageYOffset == document.body.scrollTop 같은코딩
            if (document.body.scrollTop > 20
                    || document.documentElement.scrollTop > 20) {
                document.getElementById("myBtn").style.display = "block";
            } else {
                document.getElementById("myBtn").style.display = "none";
            }
        }
 
        document.getElementById("myBtn").onclick = function() {
            document.body.scrollTop = 0;
            document.documentElement.scrollTop = 0;
        }
    </script>

cs


<script>


※ window.onscroll 란? 


요소의 스크롤이 스크롤 될 떄 onscroll 이벤트가 발생되는 것.





<실행결과>


저작자표시 비영리 변경금지 (새창열림)

'이전 글 > JavaScript' 카테고리의 다른 글

21. JavaScript. setTimeout/setInterval  (0) 2018.01.21
20. JavaScript Ex.19 마우스 이벤트 처리  (0) 2018.01.21
18. JavaScript Ex.17 div, span 태그 펼치기/접기  (0) 2018.01.21
17. JavaScript Ex.16 DOM(Document Object Model)-2  (0) 2018.01.18
16. JavaScript Ex.15 DOM(Document Object Model)  (0) 2018.01.18
profile

REFACTOR

@usnooy_

포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!

검색 태그

티스토리툴바