전체상품목록 바로가기

본문 바로가기

지연

 

게시판 상세
제목 11
작성자 정원디자인 (ip:)

<style> 

   /* slideshow */

    .back-to-top {position: fixed;border: 3em;right: 3em;background-color: rgba(255,255,255,.9);color: #313943;border: none;border-radius: 5px;padding: 1em;text-transform: uppercase;cursor: pointer;font-weight: 700;box-shadow: 0 0 2em 0 rgba(0,0,0,.25);transition: all .3s ease-in-out;display: inline-block;opacity: 0;text-decoration: none;font-size: .75em;}

   

    #back-to-top:hover{background-color: #fff;padding: 1em 3em;}

    #back-to-top.visible {opacity: 1;}

</style>





<main>

        <h2>Lorem Ipsum</h2>

        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

    </main>


    <footer>

        <p><small><em>Typography and color scheme based on<a href="http://typespiration.com/design/the-signal/">

            "The Signal"</a></em></small></p>

        <a id="back-to-top" href="#">Top</a>

    </footer>

    <!--//footer -->

   










/* 11 12

* - 변수 지정하기


* - 문서의 높이를 계산하고 원하는 부분이 상단에서 얼만큼 떨어져 있는지 offset 값을 계산하기

* - 스크롤과 클릭 이벤트 작성하기

*/

  var btt = document.getElementById('back-to-top'),

      docElem = document.documentElement,

      offset,

      scrollPos,

      docHeight;

   

    //문서 높이 계산하기

    //docHeight = docElem.scrollHeight;

    docHeight = Math.max(docElem.offsetHeight, docElem.scrollHeight);

    if(docHeight !- 'undefined'){

        offset = docHeight / 4;       

       }

    //스크롤 이벤트 추가

    window.addEventListener('scroll', function(){

        scrollPos = docElem.scrollTop;

        console.log(scrollPos);

       

        btt.className = (scrollPos > offset) ? 'visible' : '';

    });

   

    btt.addEventListener('click',function(ev){

        ev.preventDefault();//링크의 본연의 기능을 막는다.

       // docElem.scrollTop = 0;

        fnction scrollToTop(){

            //일정시간 마다 할일

            //var scrollInterval = setInterval(할일,시간);

            //0.0015s = 15

            //할일 = function(){실제로 할일}

            //실제로 할일 윈도우 스크롤이 0이 아닐때 window.scrollBy(0,-55);

            //스크롤이 0이면 setInterval 멈춰라. clearInterval(이름);

            var scrollInterval = setInterval(function(){

                if(scrollPos != 0){

                    window.scrollBy(0,-55);

                }else{

                    clearInterval(scrollInterval);

                },15);

        }

   

   

</script>

   

첨부파일
비밀번호 수정 및 삭제하려면 비밀번호를 입력하세요.
댓글 수정

비밀번호 :

/ byte

비밀번호 : 확인 취소