通过单击列表滚动到部分 [英] Scroll to section by clicking list

问题描述

当我点击侧边栏列表上的一个项目时，我想要滚动到相应的.cinematography_box。就像第一个项目> goto>第一个.cinematography_box div等等在第二个，第三个等等。

什么是实现这个目标的最好方法？

 < div id =sidebarclass =clearfix> 
< ul> 
< li> 
< a id =aboutlinkhref =javascript：void（0）>电影摄影列表< / a> 
< / li> 
< li> 
< a href =javascript：void（0）>第一项< / a> 
< / li> 
< li> 
< a href =javascript：void（0）>第二项< / a> 
< / li> 
< li> 
< a href =javascript：void（0）> THIR ITEM< / a> 
< / li> 
< / ul> 
< / div> 
 
< div id =galleryclass =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> 
  

解决方案

定义每个元素：

 < li data-target =one> 
< a href =javascript：void（0）> THIR ITEM< / a> 
< / li> 
 
< div class =cinematography_infodata-pos =one> 
< p> Lorem Ipsum< / p> 
< / div> 
  

使用jQuery你可以做到这一点：

< $（$$）。$（$）$（$）$（$）$（$）$（$）$（$） attr（data-target））;
}）;
}）;


function scrollTo（target）{
var tagScroll = $（.cinematography_info [data-pos ='+ target +']）;
$（'html，body'）。animate（{scrollTop：tagScroll .offset（）。top}，'slow'）;
}

查看我所做的示例：
http://jsfiddle.net/NfwEv/9/

I want to make a scroll to the corresponding .cinematography_box when I click on a item on the list of the sidebar, I have with this markup:

It would be like, first item on the list > goto > first .cinematography_box div and so on on the second, third and 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>

解决方案

Define each element like that:

<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 could 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 that i've made: http://jsfiddle.net/NfwEv/9/

这篇关于通过单击列表滚动到部分的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！