根据点击次数转到页面加载锚点 link

Question

你好，我有一个代码可以让我在页面加载时锚定。

如果我有一个链接是不同锚点的菜单怎么办？当我单击 link1 时，它会加载一个页面并将我带到 anchor1，而当我单击 link2 时，它会将我带到同一页面但会转到 anchor2？

$(function(){
    $('html, body').animate({
        scrollTop: $('.anchor1').offset().top
    }, 1000);
    return false;
});

Answer 1

这看起来像是使用 javascript 将值从一个包含菜单链接的页面传递到另一个包含锚点的页面。

有很多方法可以做到这一点，其中之一就是使用 cookie。假设您在菜单页面上有一个下拉列表，您可以从中传递 anchor

的值

<select id="menuselect">
  <option value=".anchor1"> Anchor1 </option>
  <option value=".anchor2"> Anchor2 </option>
  <option value=".anchor3"> Anchor3 </option>
</select>

现在在 Menupage js 中

$(#menuselect).change(function(){
  //Store value of anchor class to passed to next page from option sel;ected in menu dropdow in cookie
  $.cookie('anchorclass',$(this).val());

  $(window).load('AnchorPage.htm'); // Go to page containing anchors
});

现在在锚页面中，您可以检查存储在 cookie 中的值，并使用您的代码在页面加载时到达该锚。

AnchorPage.htm

$(document).ready(function(){
  var classofAnchor = '.anchor1'; //Set default target anchor class
  if($.cookie('anchorclass') ! = null)
  {
    classofAnchor = $.cookie('anchorclass'); // Fetch value from cookie
  }
  $('html, body').animate({
        scrollTop: $(classofAnchor).offset().top
    }, 1000);
});

根据点击次数转到页面加载锚点 link

Go to anchor on page load depending on clicked link

anchor

jquery

load