锚点滚动到顶部

Anchor to scroll not to the top

本文关键字：顶部 滚动      更新时间：2023-09-26

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

<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 的一种方法？

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

您可以通过为每个定位点提供一个具有以下属性的类来简单地做到这一点：

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

然后在您的 HTML 标记中：

<a class="anchor" id="sc_overview">I am invisible</a>
当然，如果您的锚元素

在页面上可见，这可能会产生影响，因此请选择一个仅适合该目的的锚元素。

试试这个： 

target.offset().top + 100

例：

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

例：

jsFiddle 演示

尝试使用 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
    });
} 
});
相关文章：