[原創作品]web網頁中的錨點

　　因為近來在從事web前端開發的工作，所以寫的文章也都是關於web這一塊。以后將分享算法和web高級編程的內容，很多公司的web前端不夠重視，以為是很low-level，給的待遇也很一般，其實，這都是很狹隘的理解。軟件開發是一種很謹慎的工作，每一個環節都需要足夠的重視。好了，不扯淡。需要扯淡的，點擊左邊信息欄加群按鈕。

 

　　今天分享的內容是網頁錨點效果，就是在網頁滾動到某個位置時，菜單有相應的變化。如圖，

 

 

就是在滾動時，菜單會有相應的選中效果，點擊菜單時，定位到網頁內容。

 

菜單代碼：

        <ul class="menu">
            <li><a href="#about-us">關於我們</a></li>
            <li><a href="#dynamic">動態</a></li>
            <li><a href="#case">案例</a></li>
            <li><a href="#service">服務</a></li>
            <li class="select"><a href="#index">首頁</a></li>
        </ul>

錨點的話就是在網頁相應的位置加上id屬性，這里是在section標簽加的id，就行。重點看js代碼：

 

   $(window).scroll(function () {

            $('section[id]').each(function(){
                var id = $(this).attr('id');
                var offsetTop = document.getElementById(id).getBoundingClientRect().top;
                var offsetBtm = document.getElementById(id).getBoundingClientRect().bottom;

                if(offsetTop < 0 && offsetBtm > 0) {
                    $('.menu li a[href]').parent().removeClass('select');
                    $('.menu li a[href=#'+id+']').parent().addClass('select');
                }
            });

        });

 

　　上面代碼中getBoundingClientRect()的作用的將選取的dom元素作為矩形，其相對的位置是瀏覽器窗口的大小。.top是dom元素上邊距距離瀏覽器窗口上邊的距離，.bottom是dom元素下邊距距離窗口上邊距的距離。說白了，就是以瀏覽器左邊，上邊為基准。還有.left, .right，這個，博友應該明白什么意思了。當上邊距小於等於0，且下邊距大於0說明該元素在當前瀏覽器視圖中。改變菜單的選中狀態。

　　因為a標簽在li里面，而選中狀態在li class="select"，所以點擊時應該這樣寫，

 

  $('.menu li').click(function(){
            window.location = $(this).find('a').attr('href');
            $(this).siblings().removeClass('select');
            $(this).addClass('select');
        });

 

就是加上window.location，讓頁面跳轉到相應的元素。

好了，這部分不是難點，不做多余解釋。原創作品，轉載請注明出處：http://zhutty.cnblogs.com