頁跳到圖像

我正在玩一個簡單的網站（我是一個HTML和CSS的初學者），在那裏我用一些子菜單做了一個簡單的菜單。該頁面的內容（主要是圖像和視頻）將顯示在滾動框中。頁跳到圖像

現在我認爲，不是創建不同的子頁面，而是能夠跳到相關的內容。我嘗試了不同的解決方案，但有些東西沒有解決 - 或者至少，jsfiddle沒有顯示出來。

<div id="navigation"> 
    <ul>   
     <li> 
     <a href="#">main menu</a> 
      <ul> 

        <li><a href="#section1">section 1</a></li> 
        <li><a href="#section2">section 2</a></li> 
        <li><a href="#section3">section 3</a></li> 
      </ul> 
     </li> 
    </ul> 
</div>

這是我爲菜單的一部分代碼，這裏是用圖片的滾動框：

<div class="scroll" style="float:left;border: 1px solid black; width: 40em; 
    height: 30em; line-height: 3em; overflow-y: scroll; overflow-x:hidden; 
    text-align: center; margin:5%; margin-bottom: 5%; background-color: #ffffff; 
    color: #ffffff;"> 

    <img src="http://websiteurl.com/image.jpg" style="float: left; width: 95%; 
     padding: 3%; padding-right: 3%; display: block" alt="image1"> 
    <a name="section1"><img src="http://websiteurl.com/image2.jpg" 
    style="float: left; width: 95%; padding: 3%; padding-right: 3%; alt="image2"></a></div>

因此，大家可以看到，我想點擊菜單鏈接「部分1」事業上跳過滾動到所需的圖像位置，而無需更改頁面本身。

這怎麼可能？或者：錨定中的錯誤在哪裏？謝謝大家的回答！

來源

2013-07-11 user2563759

使用內聯css閱讀代碼很困難。我首先建議將CSS移到樣式表中，這肯定會有助於可讀性和調試。

您是否測試過沒有圖像或沒有滾動框？

一個錨標記，通常只是

<a href="#myAnchorName">Click Here</a>

，或者使用圖像而不是鏈接

<a href="#myAnchorImage"><img scr="imageLocation"/></a>

，然後錨部分

<a name="myAnchorName"></a>

來源

2013-07-11 14:27:15 null

啊，感謝可讀性提示！這是一個好的，現在就會做到這一點。至於錨定標籤 - 正是我所嘗試的。然而，它只是跳轉到滾動框中的第一個圖像（我現在只是試過沒有框，這是相同的結果）。我不知道爲什麼它不會進一步跳下去.. – user2563759

這是一個JS小提琴與一個醜陋的，但從上到下彈跳工作的例子。 http://jsfiddle.net/5684c/ 剛剛意識到我離開了CSS窗口，但它沒有被使用。 BR標籤的道歉，我沒有太多時間。 – null

感謝您無論如何給我你的時間！我認爲你有點太快，但似乎是空的:) – user2563759

回答

相關問題