Wie man eine Zurück-Schaltfläche erstellt, die auf den bestimmten Text/Link geklickt wird, um ein Bild anzuzeigen

Question

Was ich versuche zu tun: Ich habe mehrere Anker-Links im Text, von denen jeder auf eine bestimmte bezieht und verbindet Bild (auf der gleichen Seite).

Nachdem der Benutzer dieses Bild angesehen hat, möchte ich, dass sie auf einen "Zurück" -Button klicken, der sie zurück zum Text bringt, wo sie auf den Link geklickt haben, um weiter zu lesen, wo sie aufgehört haben. (Ich habe die Schaltfläche in der HTML erstellt, mit einer 'ID' von 'BackButton').

Hinweis: Ich bin neu bei JS und jQuery, und vielleicht hat meine Unfähigkeit, ein Plugin oder eine Erklärung dafür zu finden, etwas damit zu tun, dass eine Suche mit einer klaren und prägnanten Erklärung in einem Suchfeld fehlgeschlagen ist . (Es scheint mir, dass dies eine ziemlich häufig verwendete Funktion wäre)

Dies ist, wo ich zur Zeit mit meinen Versuchen steht jquery für diesen Einsatz:

$(function(){ 

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

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

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

(Ich werde versuchen, meinen Grund zu erklären, warum ich jeden Schritt tat so, dass mir jemand vielleicht sagen, warum es falsch ist):

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

für jeden Anker, wenn es angeklickt wird, tun sie diese Funktion,

$(this) Siehe den Anker-Link, auf dem geklickt wurde,

.attr('id', 'backLink') diesen Anker Geben Sie den 'id' von backToLink,

.addClass('que'); In den class von que, die in meiner CSS-Datei gesetzt ist padding-top zu geben unter den fixed-positionheader, so dass der Text sichtbar sein wird

$('#backButton').attr('href', '#backToLink'); dieSetshref zurück zum ursprünglichen Link im Text, der jetzt #backToLink sein sollte.

Anmerkung: Ich vermute, dass es zu turn off notwendig sein wird, dass id von #backToLink, nachdem es verwendet wird, so dass das nächste Mal verwendet wird, es nicht mit dem ersten Konflikt steht.

Answer 1

Ich denke, das Problem hier ist, wenn Sie Anker-Navigation verwenden möchten, dann müssen Sie nicht HTML-Schaltfläche verwenden. Einfach Anker verwenden. Hier ist ein einfaches Beispiel für das, was Sie erreichen möchten. Sie können eine Logik hinzufügen, um sie Ihren Anforderungen entsprechend dynamisch zu gestalten, oder Sie können die Anzahl der Links manuell hinzufügen. Hoffe das hilft.

P.S. CSS-Klassen werden nur zum Hinzufügen von Abständen verwendet, um das Scrollen zu demonstrieren.

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>