jquery - up and down scroll with javascript -
i tried put following codes doesn't work. when down scroll, page button appears , when click it, scroll top of page. when scroll top of page, page down button appears , when click it, same action page scroll.
var amountscrolledtop = 200; var amountscrolleddown = 50; $(window).scroll(function() { if ( $(window).scrolltop() > amountscrolledtop ) { $('a.back-to-top').fadein('slow'); } else { $('a.back-to-top').fadeout('slow'); } if ( $(window).scrolltop() < amountscrolleddown ) { $('a.down1').fadein('slow'); } else { $('a.down1').fadeout('slow'); } }); $('a.back-to-top').click(function() { $('html, body').animate({ scrolltop: 0 }, 'slow'); return false; }); $('a.down1').click(function() { var objdiv = document.getelementbyid("mid"); objdiv.scrolltop = objdiv.scrollheight; });.down1{ width: 60px; height: 60px; text-indent: -9999px; position: fixed; z-index: 999; right: 60px; top: 80px; background: url("../img/simple_icons/downarrow.png") no-repeat center 43%; } .back-to-top{ display: none; width: 60px; height: 60px; text-indent: -9999px; position: fixed; z-index: 999; right: 20px; bottom: 20px; background: url("../img/simple_icons/uparrow.png") no-repeat center 43%; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <a href="#" class="down1" id="down1">down to</a> <a href="#" class="back-to-top" id="back-to-top">back top</a> . . . <div class="mid"></div> </body>page down button scroll top of page. erase javascript code.
i think looking for, put comments on code describe modifications made.
var amountscrolledtop = 200; var amountscrolleddown = 50; $(window).scroll(function() { if ( $(window).scrolltop() > amountscrolledtop ) { $('a.back-to-top').fadein('slow'); } else { $('a.back-to-top').fadeout('slow'); } if ( $(window).scrolltop() < amountscrolleddown ) { $('a.down1').fadein('slow'); } else { $('a.down1').fadeout('slow'); } }); $('a.back-to-top').click(function() { $('html, body').animate({ scrolltop: 0 }, 'slow'); return false; }); $('a.down1').click(function(e) { //you have prevent default action of link (the default going top because of href="#" if there no javascript) e.preventdefault(); //objdiv used "null" because defined class not id in html var objdiv = document.getelementbyid("mid"); $('html, body').animate({ scrolltop: objdiv.scrollheight }, 'slow'); });.down1{ width: 60px; height: 60px; position: fixed; z-index: 999; right: 60px; top: 80px; background: url("../img/simple_icons/downarrow.png") no-repeat center 43%; } .back-to-top{ display: none; width: 60px; height: 60px; position: fixed; z-index: 999; right: 20px; bottom: 20px; background: url("../img/simple_icons/uparrow.png") no-repeat center 43%; } #mid { height: 2000px; background-color: #bbb; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a href="#" class="down1" id="down1">down to</a> <a href="#" class="back-to-top" id="back-to-top">back top</a> <!-- class="mid" --> <div id="mid"></div>
Comments
Post a Comment