javascript - Why does the page shift upwards? -
do have idea why page shifts upward when click arrows (the slideshow navigators arrows) down @ bottom? it's been bugging me while now.
html
<div class="slideshow "> <div class="slides"> <img class ="slide active-slide" src="http://gearnuke.com/wp-content/uploads/2015/06/gta-5.jpg"> <img class ="slide" src="http://cdn.wegotthiscovered.com/wp-content/uploads/gta5.jpg"> <img class ="slide" src="http://www.igta5.com/images/official-artwork-trevor-yellow-jack-inn.jpg"> <img class ="slide" src="http://cdn2.knowyourmobile.com/sites/knowyourmobilecom/files/styles/gallery_wide/public/0/67/gtav-gta5-michael-sweatshop-1280-2277432.jpg?itok=nkehentw"> </div> <div class="dots-container"> <ul class="slider-dots"> <a href="javascript:void(0);" class="arrow-prev" ><<</a> <li class="dot active-dot">•</li> <li class="dot">•</li> <li class="dot">•</li> <li class="dot">•</li> <a href="javascript:void(0);" class="arrow-next" >>></a> </ul> </div>
css
.slideshow{ background-color:#000; text-align:center; width:100%; position:relative; } /*image slides*/ .slides{ height:100%; max-width:100%; } .slide{ display:none; margin:2em; max-width:70%; max-height:100%; } .active-slide { display:inline; max-width:70%; max-height:100%; } /*dots*/ .slider-dots{ text-align:center; width:100%; font-size:1.5em; padding:1%; } .dots-container{ padding:1em; } .slider-dots li{ display:inline; } .arrow-prev, .arrow-next{ font-size:16px; color:rgb(77, 151, 201); margin-left:1.8em; margin-right:1.8em; font-weight:bold; } a.arrow-prev:hover, a.arrow-next:hover,a.arrow-prev:active, a.arrow-next:active { color:#fff; text-decoration:none;} .active-dot{ color:#fff; }
i have read multiple threads, seems there's no concrete solution this.
here jsfiddle
just change order , force scroll bottom of page in way stay @ bottom
nextslide.fadein(2300).addclass('active-slide').show(); currentslide.fadeout(2300).removeclass('active-slide').hide(); $(window).scrolltop($(document).height());
you can take @ here http://jsfiddle.net/wvgqnzf9/
Comments
Post a Comment