如何更改锚点位置

【问题标题】：How to Change Anchor Location如何更改锚点位置
【发布时间】：2012-11-28 17:05:49
【问题描述】：

我的网站中有一堆锚点，因为我使用 jquery 选项卡并链接到它们。但是，当我单击链接时，我想更改锚点聚焦我的屏幕的位置。我真的不在乎它的焦点在哪里，只要它比现在高得多，而不是直接在锚的顶部。我需要这样做，而不要使用会破坏网站其余部分的东西，因为锚点周围都有内容。

anchor 坐在这里（tab1 是anchor）：

<div class="tab_container">
<div id="tab1" class="tab_content">

谢谢！

【问题讨论】：

但是 tab1 不是锚，它是一个 div。 “聚焦我的屏幕”是什么意思？您实际上是在谈论设置页面的滚动位置吗？（“焦点”是指当前哪个控件正在响应键盘输入。）
当您点击链接时，它是否专注于屏幕而不是标签内容？
不，问题是它准确地聚焦在它应该在的地方——直接在标签内容的顶部。但如果可能的话，我希望它的焦点更高一点。我之前的问题（我得到了解决:)）实际上显示了其余的代码：stackoverflow.com/questions/13560607/…

标签： jquery html hyperlink position anchor

【解决方案1】：

试试这个：

$(function () { 
    $('a[href^="#"]').click(function(e){        
        e.preventDefault();
        $('html,body').scrollTop($(this.hash).offset().top - 50);
    });
});

a[href^="#"] 选择器将应用于所有具有以# 开头的href 属性的a 标记。

如果您需要更改希望滚动条在锚点上方的距离，请修改末尾的- 50。

jsFiddle here

如果您想要精美的页面滑动，您也可以将 scrollTop 包裹在 animate 中；)

$('html,body').animate({scrollTop: ($(this.hash).offset().top - 50)}, 500);

Slidey jsFiddle here

【讨论】：