javascript - 如何创建一个后退按钮，该按钮将落在单击以查看图像的特定文本/链接处

Question

我正在尝试做的事情: 我在文本中有多个 anchor 链接，每个 anchor 链接都引用并连接到特定图像(在同一页面上)。

用户查看该图像后，我希望他们点击“后退”按钮，这将使他们返回到他们单击链接的文本，以便从他们离开的地方继续阅读。 (我已经在 html 中创建了按钮，其“id”为“backButton”)。

注意:我是 JS 和 jQuery 的新手，也许我无法找到插件或解释如何执行此操作，这与未能在搜索框中使用清晰简洁的解释进行搜索有关。 (在我看来，这将是一个相当常用的功能)

这就是我目前尝试使用 jquery 的立场:

$(function(){

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

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

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

(我会尝试解释我执行每个步骤的原因，以便有人告诉我为什么这是错误的):

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

对于每个 anchor ，当单击它时，执行此功能，

$(这个) 请参阅单击的 anchor 链接，

.attr('id', 'backLink') 为该 anchor 指定 backToLink 的“id”，

.addClass('que'); 添加 que 的 class，它在我的 CSS 文件中设置为提供 padding-top，以便文本在 下方可见>固定位置 标题，

$('#backButton').attr('href', '#backToLink'); 设置 #backButton href 返回文本中的原始链接，现在应该是 #backToLink。

注意:我怀疑使用后需要关闭#backToLink的id， 这样下次使用的时候就不会和第一次冲突了。

Answer 1

我认为这里的问题是如果你想使用 anchor 导航那么你不需要使用 html 按钮。只需简单地使用 anchor 即可。这是您想要实现的目标的一个简单示例。您可以添加逻辑以根据您的需要使其动态化，或者通过手动添加链接数量来保持这种状态。希望这会有所帮助。

附注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>