2011-08-29 3 views
0

나는 mootools 초보 다. 나는 많은 HTML과 CSS를 알고 있지만 자바 스크립트는 나를 위해서는 아니다. (적어도 지금은 배우기 시작했다.) ...워터 마크 mootools 도움

나는이 게시물을 보았다 : http://davidwalsh.name/mootools-watermark 이 게시물은 "워터 마크 - Go To 위쪽 "단추.

HTML :

<a href="#top" id="gototop" class="no-click no-print">Top of Page</a> 

CSS :

#gototop { display:none; position:fixed; right:5px; bottom:5px; } 

자바 스크립트 :

<script type="text/javascript"> 
    window.addEvent('domready',function() { 
     new SmoothScroll({duration:500}); 

     var go = $('gototop'); 

     go.set('opacity','0').setStyle('display','block'); 
     window.addEvent('scroll',function(e) { 
      go.fade((window.getScroll().y > 300) ? 'in' : 'out') 
     }); 

    }); 
</script> 

내가 척하는 링크가 디스플레이로하지 않는다는 것입니다 : 없음; 왜냐하면 사용자가 자바 스크립트가 켜져 있지 않으면 버튼을 볼 수 없기 때문입니다.

그래서 내가 원하는 것은 숨기고 스크롤이 300px보다 큰 경우에만 표시하는 것입니다. 사용자가 브라우저에서 자바 스크립트를 사용하도록 설정하지 않은 경우 항상 버튼이 표시되는 것을 볼 수 있습니다. ...

그래서,이 javascirpt는 토글 on/off로 사용해야합니다. oppacity의 디스플레이에서 :

<a href="#top" id="gototop" class="no-click no-print">Top of Page</a> 

#gototop { display:block; position:fixed; right:5px; bottom:5px; } 

아무도 나를 도울 수 있습니까 ???

감사합니다, 매트

답변

1
window.addEvent('domready', function() { 
    $('gototop').setStyle('display','none'); 
    ((window.getScrollSize().y + 300)> window.getSize().y) ? $('gototop').fade(1) : $('gototop').fade(0) 
});