锚定不滚动到顶部

Question

我的页面中有一个移动子菜单，代码如下：

<select class="mobile_width_100 mobile_padding_010" onchange="location = this.options[this.selectedIndex].value;">
    <option value="#sc_overview">OVERVIEW</option>
    <option value="#sc_study_option">STUDY OPTIONS</option>
    <option value="#sc_packages">COURSES</option>
    <option value="#sc_pricing">PRICING</option>
    <option value="#sc_testimonial">TESTIMONIALS</option>
    <option value="#sc_faqs">FAQS</option>
    <option value="#sc_course_dates">COURSE DATES</option>
</select>

它工作得很好，但是当我点击其中一个选项时，我会选择该选项，因为我有一个固定的页面标识和主菜单框架，此选项的div显示在顶部。这将是一种方法去锚点添加100px正确显示div？

Answer 1

如果我理解正确，你想要将所有锚点偏移100px对吗？

你可以通过给每一个锚一个具有以下属性的类来做到这一点：

.anchor {
    position:relative;
    top: 100px;
    display: block;
    visibility: hidden;
}

然后在你的html标记中：

<a class="anchor" id="sc_overview">I am invisible</a>

当然，如果您的锚元素在页面上可见，那可能会产生影响，因此请选择仅适合此目的的元素。

Answer 2

试试这个：

target.offset().top + 100

示例：

$(".select").change(function () {
var val = $(this).val();
var target = $(val);
    $("html,body").animate({
        scrollTop: target.offset().top + 100
    })
})

示例：

<强> jsFiddle Demo

Answer 3

尝试使用scrollTop和animate

$(function(){
 if(window.location.hash) {
  target = '#'+window.location.hash;
  $("html,body").animate({
        scrollTop: $(target).offset().top + 100 //change 100 with the height of your logo
    });
} 
});