JavaScript를 사용하여 페이지 스크롤

나는 Ender.js을 사용하고 있으며 페이지를 특정 위치로 스크롤하려고합니다. 내가 여기 뭔가 잘못하고 있다고 생각하지만 페이지가 움직이지 않습니다. 이상적으로 나는 animate 이벤트를 사용하는 것을 좋아하지만 emile은 scrollTop을 매개 변수로 받아들이지 않습니다. 도움을 주시면 감사하겠습니다.JavaScript를 사용하여 페이지 스크롤

[email protected]
[email protected]
[email protected]
[email protected]

$.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); 
     }); 
    }); 
});

내 빌드 구성 [email protected]

[email protected]

출처

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

JavaScript를 사용하여 페이지 스크롤

답변

관련 문제