1. 程式人生 > >jq點選導航頁面滑動到對應內容

jq點選導航頁面滑動到對應內容

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
    <title>jq點選導航頁面滑動到對應內容</title>
    <style>
        *{margin: 0;padding: 0;}
        .div{position: fixed;top: 0;left: 500px;}
        ul{list-style:none;}
        ul li{width:80px;height:50px;line-height:50px;text-align:center;display:inline-block;cursor:pointer;background:gray;}
        #hd1{height:100px;width:100%;}
        #hd2{height:500px;width:100%;}
        #hd3{height:800px;width:100%;}
        #hd4{height:1000px;width:100%;}
        #hd5{height:1500px;width:100%;}
    </style>
</head>
<body>
    <div class="div">
        <ul>
            <li onclick="click_scroll()">導航1</li>
            <li onclick="click_scroll2()">導航2</li>
            <li onclick="click_scroll3()">導航3</li>
            <li onclick="click_scroll4()">導航4</li>
            <li onclick="click_scroll5()">導航5</li>
        </ul>
    </div>
    <div>
        <div id="hd1" class="section">
            <div >內容一</div>
        </div>
        <div id="hd2" class="section">
            <div>內容二</div>
        </div>
        <div id="hd3" class="section">
            <div>內容三</div>
        </div>
        <div id="hd4" class="section">
            <div>內容四</div>
        </div>
        <div id="hd5" class="section">
            <div>內容五</div>
        </div>
    </div>


<script type="text/javascript">
    //500 控制點選滾動條向下滑動的速度
    function click_scroll() {
        var scroll_offset = $("#hd1").offset().top;
        $("body,html").animate({
        scrollTop: scroll_offset 
        }, 500);
    }
    function click_scroll2() {
        var scroll_offset = $("#hd2").offset().top;
        $("body,html").animate({
        scrollTop: scroll_offset 
        }, 500);
    }
    function click_scroll3() {
        var scroll_offset = $("#hd3").offset().top;
        $("body,html").animate({
        scrollTop: scroll_offset 
        }, 500);
    }
    function click_scroll4() {
        var scroll_offset = $("#hd4").offset().top;
        $("body,html").animate({
        scrollTop: scroll_offset 
        }, 500);
    }
    function click_scroll5() {
        var scroll_offset = $("#hd5").offset().top;
        $("body,html").animate({
        scrollTop: scroll_offset 
        }, 500);
    }
</script>
</body>
</html>