錨定不滾動到頂部

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演示

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