使用JavaScript滾動頁面

我使用的是Ender.js，我試圖讓頁面滾動到特定的位置。我想我在這裏做錯了什麼，但頁面甚至沒有移動。理想情況下，我希望使用動畫事件，但emile不接受scrollTop作爲參數。任何幫助表示讚賞。使用JavaScript滾動頁面

$.domReady(function() { 
    function startPageScroll(finalPos){ 
     var scrollAmount = 0; 
     var id = setInterval(function(){ 
     if(scrollAmount < finalPos){ 
      $('body,html').scroll(0,50); 
      scrollAmount+=50; 
     } 
     else{clearInterval(id);} 
     },100); 
    } 
    $('a.back-to-top-link').each(function(element) { 
     var link = $(element); 
     var target = link.attr("href"); 
     var position = $(target).offset().top;  
     link.on('click', function(event) { 
      event.preventDefault(); 
      startPageScroll(position); 
     }); 
    }); 
});

我的構建包括：

來源

2011-05-12 Demwunz

上週我們剛剛推出了一個新版本的網站，用JavaScript滾動。你可以看到它住在http://beebole.com但我已經提取的代碼下面一個基本的例子：

<html lang="en"> 
<head> 
    <title>BeeBole - Simple and Fast Timesheets</title> 
    <style> 
     body{ padding:0 1em; margin:0;} 
     ul{ padding:0;margin:0;} 
     li{ list-style:none; float:left; margin:0 1em;} 
     h1{ clear:both;} 
    </style> 
</head> 
<body> 
    <a id="home" name="home"></a> 
    <div class="header"> 
     <ul class="menu"> 
      <li><a class="fr current" href="#home" onclick="return beebole.scrollTo(this)">Home</a> 
      <li><a class="fr" href="#pricing" onclick="return beebole.scrollTo(this)">Pricing</a> 
      <li><a class="fr" href="#tour" onclick="return beebole.scrollTo(this)">Tour</a> 
     </ul> 
    </div> 
    <div class="chapter home"> 
     <h1>Home</h1> 
     <p>Lorem ipsum dolor sit ... in feugiat massa congue in.</p> 
    </div> 

    <a id="pricing" name="pricing"></a> 
    <div class="header"> 
     <ul class="menu"> 
      <li><a class="fr" href="#home" onclick="return beebole.scrollTo(this)">Home</a> 
      <li><a class="current fr" href="#pricing" onclick="return beebole.scrollTo(this)">Pricing</a> 
      <li><a class="fr" href="#tour" onclick="return beebole.scrollTo(this)">Tour</a> 
     </ul> 
    </div> 
    <div class="chapter pricing"> 
     <h1>Pricing</h1> 
     <p>Lorem ipsum dolor sit ... in feugiat massa congue in.</p> 
     <p>Lorem ipsum dolor sit ... in feugiat massa congue in.</p> 

    </div> 

    <a id="tour" name="tour"></a> 
    <div class="header"> 
     <ul class="menu"> 
      <li><a class="fr" href="#home" onclick="return beebole.scrollTo(this)">Home</a> 
      <li><a class="fr" href="#pricing" onclick="return beebole.scrollTo(this)">Pricing</a> 
      <li><a class="current fr" href="#tour" onclick="return beebole.scrollTo(this)">Tour</a> 
     </ul> 
    </div> 
    <div class="chapter tour"> 
     <h1>Take a tour</h1> 
     <p>Lorem ipsum dolor sit ... in feugiat massa congue in.</p> 
     <p>Lorem ipsum dolor sit ... in feugiat massa congue in.</p> 
     <p>Lorem ipsum dolor sit ... in feugiat massa congue in.</p> 

    </div> 
    <script> 
    (function(){ 
     window.beebole = { 
      getPos: function(elm){ 
       var x = 0, y = 0; 
       while(elm != null) { 
        x += elm.offsetLeft; 
        y += elm.offsetTop; 
        elm = elm.offsetParent ; 
       } 
       return {x:x, y:y}; 
      }, 
      damper:function(rfnAction, rfnDone, duration){ 
       var interval, 
        startTime = new Date().getTime(); 

       interval = setInterval(function(){ 
        var pos, 
         t, 
         now = new Date().getTime(); 

        t = now - startTime; 
        if(t >= duration){ 
         clearInterval(interval); 
         rfnDone.call(beebole); 
        }else{ 
         t = 2 * t/duration; 
         if (t < 1) { 
          pos = 0.5*t*t*t*t; 
         }else{ 
          t -= 2; 
          pos = -0.5 * (t*t*t*t - 2); 
         }      
         rfnAction.call(beebole, pos); 
        } 
       }, 15); 
      }, 
      scrollTo: function(a){ 
       try{ 
        var endName = a.href.split('#')[1], 
         endElm = document.getElementById(endName), 
         start = isNaN(window.pageYOffset) ? 
          document.documentElement.scrollTop : 
          window.pageYOffset, 
         end = beebole.getPos(endElm).y, 
         length = beebole.getPos(endElm).y - start; 

        this.damper(function(pos){ 
         //when moving 
         window.scrollTo(0, start + length * pos); 
        }, function(){ 
         //when done 
         window.location.hash = endName; 
        }, 
        //duration 
        Math.max(Math.abs(Math.round(length/3)), 1200)); 
        return false; 
       }catch(e){ 
        return true; 
       } 
      } 
     }; 
    })(); 

    </script> 
</body> 
</html>

要麼添加更多的內容，其中lorem ipsum是。或者使瀏覽器窗口非常小以進行滾動。

點擊鏈接查看頁面移動。

如果瀏覽器關閉了Javascript，瀏覽器將使用默認的＃鍵負責滾動。但顯然沒有阻尼效應。它沒有在IE6和IE7上測試過。

來源

2011-05-12 23:40:54 Mic

尼斯寬鬆實施 – mVChr 2011-05-12 23:49:57

使用JavaScript滾動頁面

回答

相關問題