jQuery跳到锚点上方100px

Question

Instead of the window jump so that the anchor is at the top of the page, I'd like it to be 100px below the top of the page. I don't want to animate, and I'd rather it didn't jump twice.

I'd like it to be a general solution.

This is what I have tried but it doesn't seem to work...

$("a.inpage").click(function (e) {
    e.preventDefault();
    $(":target").each(function () {
        var targetpos = $(this).position();
        var scrollpos = targetpos.top - 100;
        window.scrollTo(0,scrollpos);
    })
}

Thanks, David

Answer 1

:target CSS3 selector matches element which id is the part of the URL. But you are using ev.preventDefault() so you do not follow the link and URL does not change

It is better to do smth like

$("a.inpage").click(function (e) {
    e.preventDefault();
    var targetpos = $($(this).attr('href')).position(); // note this line
    var scrollpos = targetpos.top - 100;
    window.scrollTo(0,scrollpos);
}