jQuery 轉成 js

js scrollto

a5244245 2016-12-02 10:00:11 ‧ 4563 瀏覽

以下是jQuery的程式，因為一些問題想轉成javascript，請教各位大大

jQuery(document).ready(function(){

  function scrollToDiv3(element,navheight){
        var offset = element.offset();
        var offsetTop = offset.top;
        var totalScroll = offsetTop-navheight;
        var navheight = jQuery('.uk-container uk-container-center');
        //console.log(totalScroll);
        jQuery('body,html').animate({
                scrollTop: totalScroll
        }, 500);
}

function scrollToDiv4(element,navheight){
        var offset = element.offset();
        var offsetTop = offset.top;
        var totalScroll = offsetTop-navheight;
        var navheight = jQuery('#tm-headerbar');
        //console.log(offsetTop);
        jQuery('body,html').animate({
                scrollTop: totalScroll
                //top:windowBottomTarget
        }, 500);

}

  jQuery('.alink').click(function(){
        var el = jQuery(this).attr('href');
        var elWrapped = jQuery(el);
       // scrollToDiv(elWrapped,40);
         if(jQuery(window).scrollTop()<30){
                //console.log(jQuery(this).index());
        scrollToDiv4(elWrapped,170);}
        else{
        scrollToDiv3(elWrapped,90);
        }
});
});

看更多先前的討論...收起先前的討論...

fillano iT邦超人 1 級 ‧ 2016-12-02 10:51:53 檢舉

所以你的問題是？你只提到你的需求，但是沒提到問題阿？

丹尼 iT邦研究生 4 級 ‧ 2016-12-02 10:58:00 檢舉

他的意思應該是說他想把JQUERY 程式碼轉成JAVA程式碼

a5244245 iT邦新手 5 級 ‧ 2016-12-02 11:00:29 檢舉

對的，我想要把上面的那一串程式改寫成js，抱歉剛沒說清楚

fillano iT邦超人 1 級 ‧ 2016-12-02 11:39:55 檢舉

jQuery.animate的實作很複雜，看看有沒有網友願意做功德吧XD

不然你來參加鐵人賽，三十天做完...

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

1 個回答

jsgao0

iT邦新手 5 級 ‧ 2016-12-02 12:51:44

做了個scrollTo function及Demo code，放在jsbin上。至於怎麼應用，就看你囉! 來把scrollTo主要程式碼說明一下:

function gotoElement(sn, time) {
  var className = 'sn-' + sn, // 這應該不用說，就是class name
      ms = time || 10, // 給定scroll所花的時間(毫秒)，若沒設定則為10ms
      el = document.querySelector('.' + className), // 透過class name取得element
      i = 10; // 這個比較特別，用來設定每個frame的呈現時間
              // 太小的話，會因執行速度太慢而在scroll得時候看起來lag
  
  scrollTimout();
  
  // 利用scrollTop function做成的animate function
  function scrollTimout() {
    var runner = setInterval(function() { // 週期執行，並存id在runner，繼續看到**的地方
      if(getNthTimesOffset(i) >= getOffset()) // &&判斷scrollTop有沒有滑到目標的頭頂
        clearInterval(runner); // 若有則清除runner
      scrollTo(getNthTimesOffset(i)); // scrollTo到第n次的位置
      i+= 10; // 第n+1個網格
    }, 10); // **這是周期的時間(毫秒)，每10毫秒執行一次，繼續看到&&的地方
  }
  
  // 取得第n次的位置
  function getNthTimesOffset(i) {
    return getOffset() / ms * i;
  }
  
  // 取得元素頭頂位置
  function getOffset() {
    return el.offsetTop;
  }
  
  // 用來scroll的function，傳入offset y軸的值
  function scrollTo(offset) {
    window.scrollTo(0, offset);
  }
}