Question

我有一个网站，有一堆图片，你可以水平滚动，我也有缩略图，我希望能够点击它们滚动到所需的图片。我已经阅读了有关使用锚点滚动到id的所有内容但是我仍然无法使其工作。我会附上我的代码，如果有人可以帮助我，这将是惊人的。

由于

    <!--Start Main Content-->
<div style="width:1100px; overflow-x:scroll; overflow-y:hidden;">
    <div style="width:6716px; height:600px; ">
        <!--<a id="section_1"></a>
            <div id="picture" style="background-image:url('../images/Photography/Fashion/Portrait05_lg.jpg'); width:465px; height:700px;">
                <div class="more" id="couch">
                    <img src="images/more.png" />
                    <span>Test</span>
                </div>

                <div class="more" id="plant">
                    <img src="images/more.png" />
                    <span>Test</span>
                </div>

                <div class="more" id="monitor">
                    <img src="images/more.png" />
                    <span>Test</span>
                </div>
            </div>-->

        <a id="section_2"></a>
            <div id="picture" style="background-image:url('../images/Photography/Fashion/Portrait06_lg.jpg'); width:700px; height:465px;">
                <div class="more" id="couch2">
                    <img src="images/more.png" width="25" height="25" />
                    <span><img src="../images/blog.png"></span>
                </div>

                <div class="more" id="plant2">
                    <img src="images/more.png" />
                    <span>Test</span>
                </div>

                <div class="more" id="monitor2">
                    <img src="images/more.png" />
                    <span>Test</span>
                </div>
            </div>

        <a id="section_3"></a>
            <div id="picture" style="background-image:url('../images/Photography/Fashion/Portrait07_lg.jpg'); width:700px; height:498px;">
                <div class="more" id="couch3">
                    <img src="images/more.png" />
                    <span>Test</span>
                </div>

                <div class="more" id="plant3">
                    <img src="images/more.png" />
                    <span>Test</span>
                </div>

                <div class="more" id="monitor3">
                    <img src="images/more.png" />
                    <span>Test</span>
                </div>
            </div>

        <a id="section_4"></a>
            <div id="picture" style="background-image:url('../images/Photography/Fashion/Portrait04_lg.jpg'); width:416px; height:643px;">
                <div class="more" id="couch4">
                    <img src="images/more.png" />
                    <span>Test</span>
                </div>

                <div class="more" id="plant4">
                    <img src="images/more.png" />
                    <span>Test</span>
                </div>

                <div class="more" id="monitor4">
                    <img src="images/more.png" />
                    <span>Test</span>
                </div>
            </div>

        <a id="section_5"></a>
            <div id="picture" style="background-image:url('../images/Photography/Fashion/Portrait01_lg.jpg'); width:700px; height:517px;">
                <div class="more" id="couch4">
                    <img src="images/more.png" />
                    <span>Test</span>
                </div>

                <div class="more" id="plant4">
                    <img src="images/more.png" />
                    <span>Test</span>
                </div>

                <div class="more" id="monitor4">
                    <img src="images/more.png" />
                    <span>Test</span>
                </div>
            </div>

        <a id="section_6"></a>
            <div id="picture" style="background-image:url('../images/Photography/Fashion/Portrait02_lg.jpg'); width:700px; height:465px;">
                <div class="more" id="couch4">
                    <img src="images/more.png" />
                    <span>Test</span>
                </div>

                <div class="more" id="plant4">
                    <img src="images/more.png" />
                    <span>Test</span>
                </div>

                <div class="more" id="monitor4">
                    <img src="images/more.png" />
                    <span>Test</span>
                </div>
            </div>

        <a id="section_7"></a>
            <div id="picture" style="background-image:url('../images/Photography/Fashion/Portrait03_lg.jpg'); width:700px; height:527px;">
                <div class="more" id="couch4">
                    <img src="images/more.png" />
                    <span>Test</span>
                </div>

                <div class="more" id="plant4">
                    <img src="images/more.png" />
                    <span>Test</span>
                </div>

                <div class="more" id="monitor4">
                    <img src="images/more.png" />
                    <span>Test</span>
                </div>
            </div>

        <a id="section_8"></a>
            <div id="picture" style="background-image:url('../images/Photography/Fashion/Portrait08_lg.jpg'); width:700px; height:465px;">
                <div class="more" id="couch4">
                    <img src="images/more.png" />
                    <span>Test</span>
                </div>

                <div class="more" id="plant4">
                    <img src="images/more.png" />
                    <span>Test</span>
                </div>

                <div class="more" id="monitor4">
                    <img src="images/more.png" />
                    <span>Test</span>
                </div>
            </div>

        <a id="section_9"></a>
            <div id="picture" style="background-image:url('../images/Photography/Fashion/Portrait09_lg.jpg'); width:700px; height:399px;">
                <div class="more" id="couch4">
                    <img src="images/more.png" />
                    <span>Test</span>
                </div>

                <div class="more" id="plant4">
                    <img src="images/more.png" />
                    <span>Test</span>
                </div>

                <div class="more" id="monitor4">
                    <img src="images/more.png" />
                    <span>Test</span>
                </div>
            </div>

        <a id="section_10"></a>
            <div id="picture" style="background-image:url('../images/Photography/Fashion/fashion01_lg.jpg'); width:700px; height:465px;">
                <div class="more" id="couch4">
                    <img src="images/more.png" />
                    <span>Test</span>
                </div>

                <div class="more" id="plant4">
                    <img src="images/more.png" />
                    <span>Test</span>
                </div>

                <div class="more" id="monitor4">
                    <img src="images/more.png" />
                    <span>Test</span>
                </div>
            </div>

        <a id="section_11"></a>
            <div id="picture" style="background-image:url('../images/Photography/Fashion/fashion02_lg.jpg'); width:700px; height:481px;">
                <div class="more" id="couch4">
                    <img src="images/more.png" />
                    <span>Test</span>
                </div>

                <div class="more" id="plant4">
                    <img src="images/more.png" />
                    <span>Test</span>
                </div>

                <div class="more" id="monitor4">
                    <img src="images/more.png" />
                    <span>Test</span>
                </div>
            </div>

        <!--<a id="section_12"></a>
            <div id="picture" style="background-image:url('../images/Photography/Fashion/fashion03_lg.jpg'); width:700px; height:879px;">
                <div class="more" id="couch4">
                    <img src="images/more.png" />
                    <span>Test</span>
                </div>

                <div class="more" id="plant4">
                    <img src="images/more.png" />
                    <span>Test</span>
                </div>

                <div class="more" id="monitor4">
                    <img src="images/more.png" />
                    <span>Test</span>
                </div>
            </div>
        -->

    </div>

</div>

<div id="index-text">
    <div class="shadowTop"></div>

    <div id="text" style="width:900px;">
    <a href="#section_1"><img src="../images/Photography/Fashion/Portrait06_lg.jpg" width="50" height="50" border="0" /></a>
    <a href="#section_2"><img src="../images/Photography/Fashion/Portrait06_lg.jpg" width="50" height="50" border="0" /></a>
    <a href="#section_3"><img src="../images/Photography/Fashion/Portrait06_lg.jpg" width="50" height="50" border="0" /></a>
    <a href="#section_4"><img src="../images/Photography/Fashion/Portrait06_lg.jpg" width="50" height="50" border="0" /></a>
    <a href="#section_5"><img src="../images/Photography/Fashion/Portrait06_lg.jpg" width="50" height="50" border="0" /></a>
    <a href="#section_6"><img src="../images/Photography/Fashion/Portrait06_lg.jpg" width="50" height="50" border="0" /></a>
    <a href="#section_7"><img src="../images/Photography/Fashion/Portrait06_lg.jpg" width="50" height="50" border="0" /></a>
    <a href="#section_8"><img src="../images/Photography/Fashion/Portrait06_lg.jpg" width="50" height="50" border="0" /></a>
    <a href="#section_9"><img src="../images/Photography/Fashion/Portrait06_lg.jpg" width="50" height="50" border="0" /></a>
    <a href="#section_10"><img src="../images/Photography/Fashion/Portrait06_lg.jpg" width="50" height="50" border="0" /></a>
    <a href="#section_11"><img src="../images/Photography/Fashion/Portrait06_lg.jpg" width="50" height="50" border="0" /></a>
    <a href="#section_12"><img src="../images/Photography/Fashion/Portrait06_lg.jpg" width="50" height="50" border="0" /></a><br><br>

Answer 1

尝试在标记中使用name属性作为书签，而不是id。

<a name="section_11"></a>

单击href链接时div不滚动

1 个答案: