Difference between revisions of "Template:USTC-Software/js/addScrollBar"

 
Line 6: Line 6:
 
         // add the div we want to use
 
         // add the div we want to use
 
         appendScrollBar(){
 
         appendScrollBar(){
−
             $('body').append('<div class="scroll position-fixed" style="width:70px; bottom: 100%;right:1em; transition: all .3s ease-in-out">' +
+
             $('#HQ_page').append('<div class="scroll position-fixed" style="width:70px; bottom: 100%;right:1em; transition: all .3s ease-in-out">' +
 
                 '<img src="https://static.igem.org/mediawiki/2019/5/57/T--USTC-Software--scroll.png"/>' +
 
                 '<img src="https://static.igem.org/mediawiki/2019/5/57/T--USTC-Software--scroll.png"/>' +
 
                 '<div class="position-relative backHead" style="width: 70px; height: 110px; top: -110px; cursor: pointer;"></div>' +
 
                 '<div class="position-relative backHead" style="width: 70px; height: 110px; top: -110px; cursor: pointer;"></div>' +

Latest revision as of 13:59, 9 October 2019

$(document).ready(function () { 

   class ScrollBar {
       constructor(){
           this.show = false;
       }
       // add the div we want to use
       appendScrollBar(){
$('#HQ_page').append('
' + 
               '<img src="T--USTC-Software--scroll.png"/>' +
'
' + '
'); 
       }
       // basic operation
       maintainShow(){
           $(window).scroll(function () {
               let toTop = $(document).scrollTop();
               if (toTop > 300 && !this.show){
                   $(".scroll").css("bottom", "5%");
                   console.log('gt 300px');
                   this.show = true;
               }else if(toTop <= 300 && this.show){
                   $(".scroll").css("bottom", "100%");
                   console.log('lt 300px');
                   this.show = false;
               }
           });
       }
       // make the img clickable
       listenForClick(){
           $('.backHead').on('click', function () {
               $('body, html').animate({
                   scrollTop: 0,
                   screenLeft: 0
               }, 300);
               $(".scroll").css("bottom", "100%");
           });
       }

   }

   let scrollBar = new ScrollBar();
   scrollBar.appendScrollBar();
   scrollBar.maintainShow();
   scrollBar.listenForClick();

});