使用javascript或jquery将页面焦点移动到单击的元素

时间:2016-01-28 06:28:52

标签: javascript jquery

我试图添加类似维基百科的功能,顶部有文章的大纲,当我点击它时,它会将我带到同一页面中的点击元素,我试图搜索但是我在解释它时遇到了麻烦,所以我可以得到确切的搜索,有人可以帮助我。这是代码,第二个foreach中的$ myvalues [1]是div的名称,$ cat_name [1]是href属性。

<div class="bran-cat">
            <h2>Category</h2>
            <div class="cat-list">
                <?php
                    foreach($cat_arr['cat_pro'] as $cat_name){
                        echo "<a href='#".$cat_name[1]."' class='cat-anchor'>".">".$cat_name[1]."</a> <br>";
                    }
                    //$sel_cat= $wpdb->get_results("SELECT * FROM ");
                ?>
            </div>
</div>
<?php

        foreach($cat_arr['cat_pro'] as $mykey=>$myvalues){
           echo '<div name="'.$myvalues[1].'" class="cat-title" id="'.$myvalues[0].'"><h2>'.$myvalues[1].'</h2></div>';
?>

4 个答案:

答案 0 :(得分:3)

name属性添加到锚标记,然后从另一个锚标记中将href设置为#name

E.g:

<a name='gohere'></a>
<a href='#gohere'>Click here to go to the named anchor tag</a>

答案 1 :(得分:0)

你可以这样:

<div id="scrollToThisDiv"></div>
<a href="#scrollToThisDiv">GoToTheDiv</a>

您可以使用jQuery为其设置动画,使其更流畅。

答案 2 :(得分:0)

<div id="top"></div>
<a href="#home">go to home</a>
<div> some other contents
</div>
<div id="home">Home content Home content Home content Home content</div>
<a href="#top">scroll top</a>

答案 3 :(得分:0)

<a href="#clickhere">Go to Div</a>
.
.
.
<div id="clickhere">
Your Stuff
</div>

ID标记添加到上述Div标记的位置,并使用Anchor标记指向该特定元素。