Question

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

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

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

Answer 1

这看起来像是将包含菜单链接的一个页面中的值传递给使用javascript的其他包含锚点的页面。

有很多方法可以做到这一点，其中一个使用cookies。假设您已经在菜单页面上下拉了传递锚点

的值

<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);
});

根据点击的链接

1 个答案: