Question

我有这个脚本来显示/隐藏元素并转到选定的ID。唯一的问题是它在菜单下面与其余的链接，所以我需要去ID减去约50px，以便不要低于菜单。我将如何更改此脚本来执行此操作。我试过scrolltop（）没有成功。我非常喜欢javascript，所以你知道。

$('ul.tabs').each(function(){
// For each set of tabs, we want to keep track of
// which tab is active and it's associated content
var $active, $content, $links = $(this).find('a');

// If the location.hash matches one of the links, use that as the active tab.
// If no match is found, use the first link as the initial active tab.
$active = $($links.filter('[href="'+location.hash+'"]')[0] || $links[0]);
$active.addClass('active');

$content = $($active[0].hash);

// Hide the remaining content
$links.not($active).each(function () {
  $(this.hash).hide();
});

// Bind the click event handler
$(this).on('click', 'a', function(e){
  // Make the old tab inactive.
  $active.removeClass('active');
  $content.hide();

  // Update the variables with the new link and content
  $active = $(this);
  $content = $(this.hash);

  // Make the tab active.
  $active.addClass('active');
  $content.show();

});

Answer 1

试试这个：

$('ul.tabs').each(function(){
    // For each set of tabs, we want to keep track of
    // which tab is active and it's associated content
    var $active, $content, tab = $(this), $links = tab.find('a');

    // If the location.hash matches one of the links, use that as the active tab.
    // If no match is found, use the first link as the initial active tab.
    $active = $($links.filter('[href="'+location.hash+'"]')[0] || $links[0]);
    $active.addClass('active');

    $content = $($active[0].hash);

    // Hide the remaining content
    $links.not($active).each(function () {
      $(this.hash).hide();
    });

    // Bind the click event handler
    tab.on('click', 'a', function(e){
       e.preventDefault();

      // Make the old tab inactive.
      $active.removeClass('active');
      $content.hide();

      // Update the variables with the new link and content
      $active = $(this);
      $content = $(this.hash);
      location.hash = this.hash;

      // Make the tab active.
      $active.addClass('active');
      $content.show();

      $(window).scrollTop(tab.offset().top);
    });
  });

Updated fiddle（点击活动链接 - 应跳至菜单顶部）

Answer 2

正如Pete在评论中提到的，您希望阻止默认操作。你不需要它跳到任何地方。如果他们点击了导航，他们就会看到内容正在发生变化的地方。

$(this).on('click', 'a', function(e){
    e.preventDefault() // Add this line

话虽如此，如果您在每次点击导航时都迫不及想要向下滚动导航，您可以将其添加到点击监听器的底部：

$('html, body').animate({
    scrollTop: $("ul.tabs").offset().top
}, 1000);

此外，如果您迫切希望使用哈希更新URL，您也可以强制执行此操作：

if(history.pushState) {
    history.pushState(null, null, this.hash);
} else {
    location.hash = this.hash;
}

Answer 3

这实际上非常简单。请参阅以下代码段：

$('nav a').click(function(event){
  event.preventDefault();
  location.hash = $(this).attr('href');
  var offset = $("#goto").offset().top - 50;
  $('body,html').scrollTop(offset);
});

nav, div {
  display: block;
  width: 100%;
}
nav {
  position: fixed;
  top: 0;
  left: 0;
  height: 50px;
  background: #999;
}
div {
  height: 100vh;
  background: whiteSmoke;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<nav><a href="#goto">The Goto Solution</a></nav>
<div></div>
<div id="goto">Top</div>

只需阻止默认设置，添加自己的哈希值和之后，转到所需位置。

Javascript转到ID减去一些像素

3 个答案: