CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
Alex
Alex

Reputation: 683

Scrolling to a position with bootstrap carousel button

I have a carousel button that scrolls back and forward through images.

The issue I have is that the href of the carousel is "#phonedemo" as this is where the images are stored. The scroll also moves to that specific position.

The issue I am having is that the carousel is contained inside another image, and I want the scroll to go to the top of that image.

Changing to href="#contentfeadtures" moves it to the correct position, but it no longer changes the carousel images.

Here is the 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'
            });

So instead of the button scrolling to #phonedemo, I want it go to to #contentfeadtures but retain the moving page ability.

Upvotes: 0

Views: 1959

Answers (2)

Hugo Matos de Souza
Hugo Matos de Souza

Reputation: 1

Lokesh Yadav's suggestion of replacing the href with the data-target solved my problem. When I clicked on the carousel control the slide climbed to the top and was hidden behind the menu with affix top. Now it stays static. I'm Brazilian and I needed to translate this comment.

Upvotes: 0

Lokesh Yadav
Lokesh Yadav

Reputation: 1602

If you are using jQuery then capturing click event of anchor tags and scroll to top of #contentfeadtures may trick out this issue.

$('.carousel-control').on('click', function() {
    $('html, body').scrollTo('#contentfeadtures',{duration:'slow', offsetTop : '0'});
});

Another solution you can try out

Replace href with data-target attribute refering to your carousel.

data-target="#phonedemo"

Upvotes: 2

Related Questions