twitter-bootstrap Bootstrap Carousel 前进时跳转到页面顶部
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18006289/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap Carousel Jumps to top of page when advancing
提问by Thomas
When I advance the slider manually, the slider jumps to the top of the page. How can I prevent this from happening? Help much appreciated! Here's the code:
当我手动推进滑块时，滑块会跳到页面顶部。我怎样才能防止这种情况发生？非常感谢帮助！这是代码：
<div class="row">
<div class="span12">
<script>
$('.carousel').carousel({
interval: 4000
})
</script>
<div class="container">
<div id="myCarousel" class="carousel slide frame">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item"><a href="work.html"><img src="assets/images/slide_psd.jpg" width="1170" alt="wga"></a></div>
<div class="item"><a href="work.html"><img src="assets/images/slide_wga.jpg" width="1170" alt="wga"></a></div>
<div class="item"><a href="work.html"><img src="assets/images/slide_ts.jpg" width="1170" alt="top secret hair"></a></div>
<div class="item"><a href="work.html"><img src="assets/images/slide_baja.jpg" width="1170" alt="baja"></a></div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
</div>
<!-- end cara container-->
</div>
<!-- end span-->
</div>
<!-- end row-->
回答by Ingo Sobolewski
You can add data-target attribute refering to your carousel: data-target="#carousel"
您可以添加参考轮播的 data-target 属性： data-target="#carousel"
回答by Jason Sebring
You can either do this inline (less clean) :
您可以内联执行此操作（不太干净）：
<a class="left carousel-control" role="button" data-slide="prev"
onclick="$(this).closest('.carousel').carousel('prev');">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" role="button" data-slide="next"
onclick="$(this).closest('.carousel').carousel('next');">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
or you can do globally assuming you remove the href="#controlid :
或者您可以假设您删除 href="#controlid 进行全局操作：
$('body').on('click','.carousel-control',function() {
$(this).closest('.carousel').carousel( $(this).data('slide') );
});
or you can do it individually by being more specific in your selector
或者您可以通过在选择器中更具体地单独进行
$('body').on('click','#carouselID .carousel-control',function() {
$(this).closest('.carousel').carousel( $(this).data('slide') );
});
回答by Tapesh Kumar
This one worked well for me. Replace href with "data-target"
<a class="carousel-control right" data-slide="next" data-target="#carousel">
这个对我来说效果很好。将 href 替换为“数据目标”
<a class="carousel-control right" data-slide="next" data-target="#carousel">
回答by Thomas
It turns out there was a smooth page jump script for another page that was causing this issue. It works after I moved out the the following from custom.js:
事实证明，导致此问题的另一个页面有一个平滑的页面跳转脚本。它在我从 custom.js 中移出以下内容后工作：
function filterPath(string) {
return string
.replace(/^\//,'')
.replace(/(index|default).[a-zA-Z]{3,4}$/,'')
.replace(/\/$/,'');
}
var locationPath = filterPath(location.pathname);
var scrollElem = scrollableElement('html', 'body');
$('a[href*=#]').each(function() {
var thisPath = filterPath(this.pathname) || locationPath;
if ( locationPath == thisPath
&& (location.hostname == this.hostname || !this.hostname)
&& this.hash.replace(/#/,'') ) {
var $target = $(this.hash), target = this.hash;
if (target) {
var targetOffset = $target.offset().top;
$(this).click(function(event) {
event.preventDefault();
$(scrollElem).animate({scrollTop: targetOffset}, 400, function() {
location.hash = target;
});
});
}
}
});
// use the first element that is "scrollable"
function scrollableElement(els) {
for (var i = 0, argLength = arguments.length; i <argLength; i++) {
var el = arguments[i],
$scrollElement = $(el);
if ($scrollElement.scrollTop()> 0) {
return el;
} else {
$scrollElement.scrollTop(1);
var isScrollable = $scrollElement.scrollTop()> 0;
$scrollElement.scrollTop(0);
if (isScrollable) {
return el;
}
}
}
return [];
}
回答by Facundo Colombier
you should try with jquery:
你应该尝试使用jquery：
$('.carousel-control').click(function (e) {
e.preventDefault();
});
回答by 1234567
When you link to an HTML anchor, it will be relative to where the <div id="myCarousel">is, which by default with Twitter Bootstrap, is located at the top of the carousel. I see that your using the data-tags, therefore I don't believe there is a need for the hrefattributes.
当您链接到一个 HTML 锚点时，它将相对于位置<div id="myCarousel">，默认情况下 Twitter Bootstrap 位于轮播图的顶部。我看到您使用了data-标签，因此我认为不需要这些href属性。
Change this:
改变这个：
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
to this:
对此：
<!-- Carousel nav -->
<a class="carousel-control left" data-slide="prev">‹</a>
<a class="carousel-control right" data-slide="next">›</a>
</div>
Currently I'm not at the office, so I haven't had time to test it in more than 1 scenario, however, from the looks, it should still work & give you your desired results.
目前我不在办公室，所以我没有时间在 1 个以上的场景中测试它，但是，从外观上看，它应该仍然有效并为您提供所需的结果。
回答by Brandon Morrison
i tried to set up a working document of this. i don't see the jump behavior. did nothing out of the ordinary just copied your markup, added sample images, bootstrap.js, bootstrap-carosel.js, and bootstrap.css
我试图建立一个工作文件。我没有看到跳跃行为。没有做任何不同寻常的事情，只是复制了您的标记，添加了示例图像、bootstrap.js、bootstrap-carosel.js 和 bootstrap.css
http://brandonam.com/bootTest/boot.html
http://brandonam.com/bootTest/boot.html
fyi: typical browser behavior for '#myCarousel' would be to point the window focus to the element marked '#myCarousel' ... but i think bootstrap prevents this by default. shouldn't be moving around.
仅供参考：“#myCarousel”的典型浏览器行为是将窗口焦点指向标记为“#myCarousel”的元素……但我认为默认情况下引导程序会阻止这种情况。不应该四处走动。
回答by Ziv Galili
I've had the same problem
我遇到了同样的问题
my a tag looked like:
我的 a 标签看起来像：
<a class="carousel-control right" data-mixpanel-tracker="Slider Next" data-slide="next" href="#carousel">
it was solved by removing extra mix-panel attributes in the tag:
通过删除标签中的额外混合面板属性解决了这个问题：
<a class="carousel-control right" data-slide="next" href="#carousel">
sorry that it isn't solving your problem, but it might help others with similar problem.
抱歉，它没有解决您的问题，但它可能会帮助其他有类似问题的人。
回答by pier0n
Set href to href="javascript:void(0)"then add this somewhere in your js:
设置 hrefhref="javascript:void(0)"然后将其添加到您的 js 中的某处：
$('.carousel-control.right').click(function(){ $('.carousel').carousel('next')});
$('.carousel-control.left').click(function(){ $('.carousel').carousel('prev')});
回答by Anupam
We spent quite a lot of time on this but setting the data-targetattribute and other solutions did not work for us. The scroll-up/jumping of the page was happening irrespective.
我们在这方面花了很多时间，但是设置data-target属性和其他解决方案对我们不起作用。无论如何都会发生页面的向上滚动/跳转。
This seems to happen with Bootstrap3 carousels where each slide is of different height. @Fabian's comment above helped us. For those who missed it, adding overflow:hidden to the carousel class is a good hack to fix this:
这似乎发生在 Bootstrap3 轮播中，其中每张幻灯片的高度都不同。@Fabian 上面的评论对我们有帮助。对于那些错过它的人，将 overflow:hidden 添加到 carousel 类是解决此问题的好方法：
@media (min-width: 768px)
{
#our-carousel
{
overflow: hidden; /* workaround to resolve the page jumping/scrolling up on
smaller screens on auto/manual advancing of
carousel */
}
}
