Javascript 为什么页面会向上移动？_Javascript_Jquery_Html_Css

Javascript 为什么页面会向上移动？

javascript jquery html css

Javascript 为什么页面会向上移动？,javascript,jquery,html,css,Javascript,Jquery,Html,Css,你知道为什么当我点击底部的箭头（幻灯片导航器箭头）时页面会向上移动吗？这已经困扰了我一段时间了 HTML 我读过多篇文章，但似乎没有具体的解决办法以下是这两行的： nextSlide.fadeIn(2300).addClass('active-slide').show(); currentSlide.fadeOut(2300).removeClass('active-slide').hide(); 正在发生的是，您删除了平铺，因此页面缩小。。。然后再添加一个，使其扩展。然而，当它收缩时，所

你知道为什么当我点击底部的箭头（幻灯片导航器箭头）时页面会向上移动吗？这已经困扰了我一段时间了

HTML

我读过多篇文章，但似乎没有具体的解决办法

以下是这两行的

：

nextSlide.fadeIn(2300).addClass('active-slide').show();
currentSlide.fadeOut(2300).removeClass('active-slide').hide();

正在发生的是，您删除了平铺，因此页面缩小。。。然后再添加一个，使其扩展。然而，当它收缩时，所有东西都会向上移动以适应它。你所获得的经验是因为它发生得比你所能感知到的要快

请尝试颠倒顺序：

currentSlide.fadeOut(2300).removeClass('active-slide').hide();
nextSlide.fadeIn(2300).addClass('active-slide').show();

或者，如果这导致闪烁，则为父容器提供一个绝对高度。

您的JSFIDLE中有一些错误，因此如果您修复了它，您的应用程序就可以正常工作。修复它只需在资源部分添加jquery和bootstrap.css

我一直在工作

所以html应该是：

<body>
    <div class="nav navbar-fixed-top">
        <div class="container">
            <ul class="pull-left">  <a href="#"><li>Team</li></a>
    <a href="#"><li>Learn more</li></a>
    <a href="#"><li>Contact</li></a>

            </ul>
            <ul class="pull-right"> <a href="#"><li>Learn more</li></a>
    <a href="#"><li>Contact</li></a>

            </ul>
        </div>
    </div>
    <div class="jumbotron">
        <div class="container">
                <h3>WELCOME TO SAN ANDREAS</h3>

            <p>Prepare to make your dreams come true...
                <p>
        </div>
    </div>
    <div class="actors">
<span>TEAM</span>

        <div class="container">
            <div class="row">
                <div class="col-md-4">
                    <div class="thumbnail">
                        <img src="http://cdn2-b.examiner.com/sites/default/files/styles/image_content_width/hash/92/f5/92f51c2146c471daad1002221888f4d3.jpg?itok=MExy-qsb"> <span>MICHAEL</span>

                    </div>
                </div>
                <div class="col-md-4">
                    <div class="thumbnail">
                        <img src="http://cdn2-b.examiner.com/sites/default/files/styles/image_content_width/hash/71/92/7192e2b9c8b6a24e3c9d824942799228.jpg?itok=LVyYEoB4"> <span>TREVOR</span>

                    </div>
                </div>
                <div class="col-md-4">
                    <div class="thumbnail">
                        <img src="http://media.rockstargames.com/rockstargames/img/global/downloads/buddyiconsconavatars/v_franklin_256x256.jpg">   <a href="#"><span>FRANKLIN</span></a>

                    </div>
                </div>
            </div>
        </div>
    </div>
    <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>






欢迎来到圣安德烈亚斯
准备让你的梦想成真。。。

团队
迈克尔
特雷弗

只需更改顺序，然后强制它滚动到页面底部，这样它将保持在底部

nextSlide.fadeIn(2300).addClass('active-slide').show();
currentSlide.fadeOut(2300).removeClass('active-slide').hide();
$(window).scrollTop($(document).height());

您可以在这里查看简单修复。设置

幻灯片

容器的最小高度

.slides {
  height: 100%;
  max-width: 100%;
  min-height: 500px; // set as per your requirement
}

您的幻灯片是

fade

ing

out

这意味着它们将从DOM中消失，从而造成一个洞并降低文档的高度，这就是为什么它会向上滚动，然后下一张幻灯片

fade

ing

在

中。因此，您需要同时保持容器的完整性，以便对其进行一些固定的最小高度。

@Justplayit94您还应该尝试简单的css方法在postHmm中回答以下问题，如果您能帮助我，还有一件事。在幻灯片中，当我去tru图像时，如果一个比另一个小，或者vicevirsa，div会不断调整大小。有什么方法可以阻止它这样做吗？如果你想避免调整大小，那么设置div的高度

height:450px//您想要的东西
nextSlide.fadeIn(2300).addClass('active-slide').show();
currentSlide.fadeOut(2300).removeClass('active-slide').hide();
$(window).scrollTop($(document).height());

.slides {
  height: 100%;
  max-width: 100%;
  min-height: 500px; // set as per your requirement
}