點擊導航目錄頁面滑動到指定div區域


$(document).on("click", ".navbar-nav li[link]", function() {
            nav.find('li').removeClass('active');
            $(this).addClass('active');
            //獲取模塊到頂部的距離 
            var id = $(this).attr("link")
            //獲取頂部導航條高度
            var topH = $("#top-nav").height()
            var divH = $("#" + id).offset().top - topH
            $('html,body').animate({
                scrollTop : divH
            }, 500);

        })
<ul class="nav navbar-nav">
                <li link="div1" class="active"><a href="#">產品展示</a></li>
                <li link="div2"><a href="#">解決方案</a></li>
                <li link="div3"><a href="#">新聞</a></li>
                <li link="div4"><a href="#">幫助中心</a></li>
</ul>
<div id="div1" class="container" style="background: black;"">產品展示</div>
<div id="div2" class="container" style="height: 500px; background-color: blue;">新聞</div>
<div id="div3" class="container" style="height: 500px; background-color: green;">幫助中心</div>
<div id="div4" class="container" style="height: 500px; background-color: gray;">意見反饋</div>

參考 http://www.17sucai.com/pins/demo-show?id=9118

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM