Question

我有一个旋转木马按钮，可以在图像中前后滚动。

我遇到的问题是旋转木马的href是＃34;＃phonedemo＆＃34;因为这是存储图像的地方。滚动也会移动到该特定位置。

我遇到的问题是旋转木马包含在另一张图片中，我希望滚动条显示在该图像的顶部。

更改为href =＆＃34; #contentfeadtures＆＃34;将其移动到正确的位置，但它不再更改轮播图像。

这是html。

<div id="contentFeadtures" class="row">
    <h1 class="col-White">Features</h1>
    <div class="row">
        <div id="phonedemo" class="carousel slide" data-ride="carousel">
            <div class="phonedemoHouseing">
                <div class="phonedemoContainer">
                    <div class="carousel-inner center-block" role="listbox">
                        <div class="item active">
                            <img src="images/carousel-1-ca.jpg" class="img-responsive">
                        </div>
                        <div class="item">
                            <img src="images/carousel-1-.jpg" class="img-responsive">
                        </div>
                        <div class="item">
                            <img src="images/carousel-1-.jpg" class="img-responsive">
                        </div>
                        <div class="item">
                            <img src="images/carousel-1-.jpg" class="img-responsive">
                        </div>
                        <div class="item">
                            <img src="images/carousel-1-.jpg" class="img-responsive">
                        </div>
                    </div>
                </div>
            </div>
            <a class="left carousel-control" href="#phonedemo" role="button" data-slide="prev">
                <img src="images/back.png" class="img-responsive">
                <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control" href="#phonedemo" role="button" data-slide="next">
                <img src="images/forward.png" class="img-responsive">
                <span class="sr-only">Next</span>
            </a>
        </div>
    </div>
</div>

jquery的

//scrollto
            $('.navbar').localScroll(200,{
        easing:'elasout'
    });
    $('section#objective,section#creationdesign,section#features,section#results').localScroll(2000,{
                easing:'elasout'
            });

因此，不是按下滚动到#phonedemo的按钮，我希望它转到#contentfeadtures但保留移动页面功能。

Answer 1

如果您正在使用jQuery，那么捕获锚标签的点击事件并滚动到 #contentfeadtures 的顶部可能会解决此问题。

data-target="#phonedemo"

您可以尝试的其他解决方案

将href替换为引用旋转木马的数据目标属性。

{{1}}

Answer 2

Lokesh Yadav建议用数据目标替换href解决了我的问题。当我点击旋转木马控件时，幻灯片爬到顶部，并隐藏在菜单后面，附加顶部。现在它保持静止。我是巴西人，我需要翻译这个评论。

使用bootstrap轮播按钮滚动到某个位置

2 个答案: