Scroll to an element

Question

I have a script that scroll to a element. When you click on a <a href>, then you scroll to the element.

The script works, but now the problem. The script scrolls to the element. But I still want that the script scrolls to the element + 100 pixels to below.

How can i do that in this script?

Thanks for helping!

The Script:

window.smoothScroll = function () {
    if (document.querySelectorAll === void 0 || window.pageYOffset === void 0 || history.pushState === void 0) {
        return
    }
    var e = function (e) {
        if (e.nodeName === "HTML") return -window.pageYOffset;
        return e.getBoundingClientRect().top + window.pageYOffset
    };
    var t = function (e) {
        return e < .5 ? 4 * e * e * e : (e - 1) * (2 * e - 2) * (2 * e - 2) + 1
    };
    var n = function (e, n, r, i) {
        if (r > i) return n;
        return e + (n - e) * t(r / i)
    };
    var r = function (t, r, i) {
        r = r || 500;
        var s = window.pageYOffset;
        if (typeof t === "number") {
            var o = parseInt(t)
        } else {
            var o = e(t)
        }
        var u = Date.now();
        var a = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || function (e) {
                window.setTimeout(e, 15)
            };
        var f = function () {
            var e = Date.now() - u;
            window.scroll(0, n(s, o, e, r));
            if (e > r) {
                if (typeof i === "function") {
                    i(t)
                }
            } else {
                a(f)
            }
        };
        f()
    };
    var i = function (e) {
        e.preventDefault();
        if (location.hash !== this.hash) window.history.pushState(null, null, this.hash);
        r(document.getElementById(this.hash.substring(1)), 500, function (e) {
            location.replace("#" + e.id)
        })
    };
    document.addEventListener("DOMContentLoaded", function () {
        var e = document.querySelectorAll('a[href^="#"]'),
            t;
        for (var n = e.length; t = e[--n];) {
            t.addEventListener("click", i, false)
        }
    });
    return r
}()

Answer 1

you tagged this as 'jQuery' so i assume you would accept a jQuery solution: it is much simpler and shorter.

you didnt provide your html markup so i dont know whats going on in your page, but you could do something like that:

$("#button").click(function() {
    $('body').animate({
        scrollTop: $("#div7").offset().top +100
    }, 1000);
});

here is an example for you: Fiddle