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

(Created page with "$(document).ready(function () { // add the div we want to use $('body').append('<div class="scroll position-fixed" style="width:70px; bottom: 100%;right:1em; transitio...")
 
Line 2: Line 2:
 
     // add the div we want to use
 
     // add the div we want to use
 
     $('body').append('<div class="scroll position-fixed" style="width:70px; bottom: 100%;right:1em; transition: all .3s ease-in-out">' +
 
     $('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"/>' +
+
         '<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>' +
 
         '</div>');
 
         '</div>');

Revision as of 11:14, 3 October 2019

$(document).ready(function () {

   // add the div we want to use
$('body').append('
' +
       '<img src="T--USTC-Software--scroll.png"/>' +
'
' + '
');
   // 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;
       }
   });
   // make the img clickable
   $('.backHead').on('click', function () {
       $('body, html').animate({
           scrollTop: 0,
           screenLeft: 0
       }, 300);
       $(".scroll").css("bottom", "100%");
   });

});