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">&bull;</li>     <li class="dot">&bull;</li>     <li class="dot">&bull;</li>     <li class="dot">&bull;</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

Popular posts from this blog

c# - Validate object ID from GET to POST -

node.js - Custom Model Validator SailsJS -

php - Find a regex to take part of Email -