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

Line 1: Line 1:
−
// add the div we want to use
+
$(document).ready(function () {
−
    console.log("addScrollBar is ok");
+
    class ScrollBar {
−
    $('#content').append('<div class="scroll position-fixed" style="width:70px; bottom: 100%;right:1em; transition: all .3s ease-in-out">' +
+
         constructor(){
−
        '<img src="https://static.igem.org/mediawiki/2019/5/57/T--USTC-Software--scroll.png"/>' +
+
             this.show = false;
−
        '<div class="position-relative backHead" style="width: 70px; height: 110px; top: -110px; cursor: pointer;"></div>' +
+
−
        '</div>');
+
−
 
+
−
    // basic operation
+
−
    let show = false;
+
−
    $(window).scroll(function () {
+
−
        let toTop = $(document).scrollTop();
+
−
        if (toTop > 300 && !show){
+
−
            $(".scroll").css("bottom", "5%");
+
−
            console.log('gt 300px');
+
−
            show = true;
+
−
         }else if(toTop <= 300 && show){
+
−
             $(".scroll").css("bottom", "100%");
+
−
            console.log('lt 300px');
+
−
            show = false;
+
 
         }
 
         }
−
     });
+
        // add the div we want to use
 +
        appendScrollBar(){
 +
            $('body').append('<div class="scroll position-fixed" style="width:70px; bottom: 100%;right:1em; transition: all .3s ease-in-out">' +
 +
                '<img src="../../File/T--USTC-Software--scroll.png"/>' +
 +
                '<div class="position-relative backHead" style="width: 70px; height: 110px; top: -110px; cursor: pointer;"></div>' +
 +
                '</div>');
 +
        }
 +
        // 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();
  
−
    // make the img clickable
+
});
−
    $('.backHead').on('click', function () {
+
−
        $('body, html').animate({
+
−
            scrollTop: 0,
+
−
            screenLeft: 0
+
−
        }, 300);
+
−
        $(".scroll").css("bottom", "100%");
+
−
    });
+

Revision as of 13:41, 9 October 2019

$(document).ready(function () { 

   class ScrollBar {
       constructor(){
           this.show = false;
       }
       // add the div we want to use
       appendScrollBar(){
$('body').append('
' + 
               '<img src="../../File/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();

});