Geek asks and answers

Go to the section by clicking on the list

I want to scroll to the corresponding .cinematography_box, when I click on an item in the sidebar list, I have this markup:

This will be the first item in the list> goto> first.cinematography_box div, etc. on the second, third, etc.

What would be the best way to achieve this?

            <div id="sidebar" class="clearfix">
                <ul>
                    <li>
                        <a id="aboutlink" href="javascript:void(0)" >CINEMATOGRAPHY LIST</a>
                    </li>
                    <li>
                        <a href="javascript:void(0)">FIRST ITEM</a>
                    </li>
                    <li>
                        <a href="javascript:void(0)">SECOND ITEM</a>
                    </li>
                    <li>
                        <a href="javascript:void(0)">THIR ITEM</a>
                    </li>
                </ul>
            </div>

                <div id="gallery" class="cinematography clearfix">

                    <div class="cinematography_box clearfix">
                        <div class="cinematography_item">
                        </div>
                        <div class="cinematography_info">
                            <p>Lorem Ipsum</p>
                        </div>
                    </div>

                    <div class="cinematography_box clearfix">
                        <div class="cinematography_item">
                        </div>
                        <div class="cinematography_info">
                            <p>Lorem Ipsum</p>
                        </div>
                    </div>

                    <div class="cinematography_box clearfix" >
                        <div class="cinematography_item">
                        </div>
                        <div class="cinematography_info">
                            <p>Lorem Ipsum</p>
                        </div>
                    </div>

                </div>
+2
source share
2 answers

Define each item as follows:

<li data-target="one">
   <a href="javascript:void(0)">THIR ITEM</a>
</li>

<div class="cinematography_info" data-pos="one">
    <p>Lorem Ipsum</p>
</div>

And using jQuery, you can do this:

$(document).ready(function(){
    $("li").click(function() {
       scrollTo($(this).attr("data-target"));
    });
});


function scrollTo(target){
    var tagScroll = $(".cinematography_info[data-pos='"+ target+"']");
    $('html,body').animate({scrollTop: tagScroll .offset().top},'slow');
}

See the example I did: http://jsfiddle.net/NfwEv/9/

+1
source

First give three tag identifier div, for example item1, item2, item3.

, a :

<li>
    <a href="#item1">FIRST ITEM</a>
</li>
<li>
    <a href="#item2">SECOND ITEM</a>
</li>
<li>
    <a href="#item3">THIR ITEM</a>
</li>
0

More articles:


All Articles