[jQuery] νƒ‘λ²„νŠΌ (.scrollTop)


νƒ‘λ²„νŠΌ κ΅¬ν˜„ν•˜κΈ°



See the Pen Top Button by Jinsol (@losuif) on CodePen.



HTML

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ScrollTop</title>
</head>
<body>
    <div id="wrap">
        <h1>
            νƒ‘λ²„νŠΌ κ΅¬ν˜„
        </h1>
        <span id="topBtn">TOP</span>

    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</body>
</html>



CSS

@charset("UTF-8");

html {
    scroll-behavior: smooth;
}

div#wrap {
    width: 600px;
    height: 2000px;
    padding: 20px;
    margin: 0 auto;
    border: 1px solid #000;
}

span#topBtn {
    width: 40px;
    height: 40px;
    text-align: center;
    font-weight: bold;
    line-height: 40px;
    border: 1px solid #000;
    cursor: pointer;
    position: fixed;
    right: 10px;
    bottom: 10px;
}



JavaScript

$(function(){

    $("span#topBtn").click(function(){
        $(window).scrollTop(0);
    });

});

Categories:

Javascript   jQuery