Difference between revisions of "Template:USTC-Software/js/addScrollBar"
| Line 1: | Line 1: | ||
$(document).ready(function () { | $(document).ready(function () { | ||
// add the div we want to use | // add the div we want to use | ||
| − | $(' | + | $('#content').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>' + | ||
Revision as of 11:41, 3 October 2019
$(document).ready(function () {
// add the div we want to use$('#content').append('
' +
');
'<img src="'' + '"/>' +
// 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%");
});
});