滑鼠點選如何平順滑動到指定的位置

Posted on 2015-12-28 Edited on 2023-11-24 In 隨手文章 Views: Disqus:

一開始我們先來學如何藉由滑鼠點擊到指定位置

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        nav > a {
            display: inline;
        }

        .square {
            border: 5px solid red;
            height: 100vh;
        }
    </style>
</head>
<body>
    <nav id="home">
        <a href="#aaa">aaa</a>
        <a href="#bbb">bbb</a>
    </nav>
    <div class="square" id="aaa">
        <p>aaa</p>
        <a href="#home">home</a>
    </div>
    <div class="square">
        <a href="#home">home</a>
    </div>
    <div class="square" id="bbb">
        <p>bbb</p>
        <a href="#home">home</a>
    </div>
</body>
</html>

由上例可知是藉由包含「#」字號的超連結a tag與指定id而達成的。

雖然接下來的技術跟上面沒有絕對的關係，

但有了以上概念後，接下來看怎麼做「平順滑動」的特效，

猜想要做「平順滑動」的特效可能需要用到，

javascript click、css transition、jQuery scrollTop bababa的...，

其實關鍵點就在於jQuery的animate

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        nav > a {
            display: inline;
        }

        .square {
            height: 100vh;
        }

        #aaa {
            background: #F99;
        }

        #bbb {
            background: #9F9;
        }

        #ccc {
            background: #99F;
        }
    </style>
    <script src="https://code.jquery.com/jquery-2.1.4.js"></script>
    <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <script>
        $(function () {
            //scroll down
            $("nav a").bind('click', function (event) {
                event.preventDefault();//先取消超連結原本預設動作
                var $anchor = $(this);
                $('body').animate({
                    scrollTop: $($anchor.attr('href')).offset().top
                }, 1000, 'easeInOutQuint');
            });

            //scroll up
            $(".page-scroll").bind('click', function (event) {
                var $anchor = $(this);
                $('body').animate({
                    scrollTop: '0'
                }, 1000, 'easeInOutQuint');
                event.preventDefault();//先取消超連結原本預設動作(加在這裡也可以)
            });
        });
    </script>
</head>
<body>
    <nav id="home">
        <a href="#aaa">aaa</a>
        <a href="#bbb">bbb</a>
        <a href="#ccc">ccc</a>
    </nav>
    <div id="aaa" class="square">
        <p>aaa</p>
        <a href="#home" class="page-scroll">home</a>
    </div>
    <div id="bbb" class="square">
        <p>bbb</p>
        <a href="#home" class="page-scroll">home</a>
    </div>
    <div id="ccc" class="square">
        <p>ccc</p>
        <a href="#home" class="page-scroll">home</a>
    </div>
</body>
</html>