scrollTo和scrollTo.js

最近做一個項目前端要用到scrollTo和滾動視覺差。順便把兩個東西拿出來溫習一下。

HTML DOM里面定義了scrollTo方法，用法：scrollTo(xpos,ypos)，把內容滾動到當前的指定位置。但是這個充其量只能說是移動而不能說是滾動，似乎沒有滑動的效果顯示出來。好在JQuery提供了足夠多方便的插件，其中一個就能夠提供平滑滾動的功能，是平滑哦~

插件叫做jquery.scrollTo.js，當然前提是首先包含jquery的庫。而且它自己里面已經封裝的很好了，只需要簡單的調用作用在標簽上的函數就能夠實現平滑的滾動，用起來非常的簡便。就像下面這樣：

$(function(){
    $(".nav_pro").click(function(){
        $.scrollTo('#pro',500);
    });
    $(".nav_news").click(function(){
        $.scrollTo('#news',800);
    });
    $(".nav_ser").click(function(){
        $.scrollTo('#ser',1000);
    });
    $(".nav_con").click(function(){
        $.scrollTo('#con',1200);
    });
    $(".nav_job").click(function(){
        $.scrollTo('#job',1500);
    });
});

scrollTo的兩個參數一個定義要滾動的元素對象，另一個是滾動所持續的時間，以毫秒計算。

平滑滾動只是這個插件可以實現的一個最基本的方法，可以考慮在這基礎上繼續去做其他的應用，比如展示文檔，模擬PPT效果等等。