如何創建一個後退按鈕，它將着陸在特定的文本/鏈接點擊查看圖像

Question

我想要做的事情： 我在文本中有多個錨鏈接，每個錨鏈接指向並連接到特定圖像（在同一頁上）。

用戶查看圖片後，我希望他們點擊「返回」按鈕，這會將他們帶回他們點擊鏈接的文本，繼續閱讀他們離開的地方。 （我已經在html中創建了按鈕，並帶有'backButton'的'id'）。

注意：我是JS和jQuery的新手，也許我無法找到插件或解釋如何執行此操作，這與無法在搜索框中使用簡明明瞭的解釋進行搜索有關。 （在我看來，這將是一個相當常用的功能）

這是我目前與我嘗試使用jQuery的這個立場：

$(function(){ 

    $('a').click(function(){ 

     $(this).attr('id', 'backToLink').addClass('que'); 

     $('#backButton').attr('href', '#backToLink'); 
    }); 
}); 

（我會盡量解釋我的理由爲什麼我做的每一步，從而可能有人告訴我，爲什麼這是錯的）：

$('a').click(function(){     

對於每個錨，當點擊它，這樣做的功能，

$(this) 參考被點擊的錨鏈接，

.attr('id', 'backLink') 給這個錨的backToLink「身份證」，

.addClass('que'); 添加的que的class，這是在我的CSS文件中設置給padding-top以便文字將在fixed-position之下可見header，

$('#backButton').attr('href', '#backToLink'); 設置#backButtonhref回到文本中的原始鏈接，現在應該是#backToLink。

注：我懷疑這將是必要的turn off說的#backToLinkid用完後， 使得它用它不會與第一次衝突的下一次。

Answer 1

我認爲這裏的問題是如果你想使用錨點導航，那麼你不需要使用HTML按鈕。只需簡單地使用錨點即可。這是您想要實現的一個簡單示例。您可以根據需要添加邏輯以使其動態化，或者通過手動添加鏈接數量來保持它的動態。希望這可以幫助。

P.S. css類只用於添加間距來演示滾動。

function scrollToAnchor(aid){ 
 
    var aTag = $("a[name='"+ aid +"']"); 
 
    $('html,body').animate({scrollTop: aTag.offset().top},'slow'); 
 
} 
 

 
$("a").click(function() { 
 
    scrollToAnchor($(this).attr('href').slice(1)); 
 
});

#container{ 
 
    height:2800px; 
 
} 
 
#block1{ 
 
    background-color:black; 
 
    width:100px; 
 
    height:100px; 
 
    margin-top:1000px; 
 
    display:inline-block; 
 
} 
 

 
#block2{ 
 
    background-color:black; 
 
    width:100px; 
 
    height:100px; 
 
    margin-top:600px; 
 
    display:inline-block; 
 
}

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> 
 
<div id="container"> 
 
    <a href="#lk1" name="bk1">Link to Block 1</a> 
 
    <br><br> 
 
    <a href="#lk2" name="bk2">Link to Block 2</a> 
 
    <br> 
 
    <div id="block1"></div> 
 
    <a href="#bk1" name="lk1">Back to Link 1</a> 
 
    <br> 
 
    <div id="block2"></div> 
 
    <a href="#bk2" name="lk2">Back to Link 2</a> 
 
</div>