Как сдедать промотку на 30px ниже?

Question

[mrzgt]

Есть ссылка при нажатии на которую перематывает и открывает tab, можно ли сделать что открывался сам таб и перематывало вниз на 30px ниже?

<a class="profile" href="" onclick="$('a[href=\'#specification\']').trigger('click'); return false;">перейти</a>

Answer 1

[ozknemoy]

повесить слушателя на клик по элементу и скормить ему функцию

function scrollTo (id) {
        var y = $('#'+id).position().top;
            y = y+30;
        scrollTo(y, 800);
        //тут клик по табу $('a[href=\'#specification\']').trigger('click');
    };

id это цель. y это расстояние от верха страницы до цели + 30px
scrollTo это кастомная функция прокрутки. если нет своей, то вот код с requestAnimationFrame :

Math.easeInOutQuad = function (t, b, c, d) {
        t /= d/2;
        if (t < 1) {
            return c/2*t*t + b
        }
        t--;
        return -c/2 * (t*(t-2) - 1) + b;
    };
var requestAnimFrame = (function(){
        return  window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function( callback ){ window.setTimeout(callback, 1000 / 60); };
    })();

    function offsetPosition(element) {
        var offsetLeft = 0, offsetTop = 0;
        do {
            offsetLeft += element.offsetLeft;
            offsetTop  += element.offsetTop
        } while (element = element.offsetParent);
        return [offsetLeft, offsetTop]
    }
function scrollTo(to, duration, callback) {
        if(!to) return;
        // если передаю ид элемента а не число
        if(typeof to === 'string') {
            to = offsetPosition(document.querySelector(to))[1]
        }

        // because it's so fucking difficult to detect the scrolling element, just move them all
        function move(amount) {
            document.documentElement.scrollTop = amount;
            document.body.parentNode.scrollTop = amount;
            document.body.scrollTop = amount;
        }
        function position() {
            return document.documentElement.scrollTop || document.body.parentNode.scrollTop || document.body.scrollTop;
        }
        var start = position(),
            change = to - start,
            currentTime = 0,
            increment = 20;
        duration = (typeof(duration) === 'undefined') ? 500 : duration;
        var animateScroll = function() {
            // increment the time
            currentTime += increment;
            // find the value with the quadratic in-out easing function
            var val = Math.easeInOutQuad(currentTime, start, change, duration);
            // move the document.body
            move(val);
            // do the animation unless its over
            if (currentTime < duration) {
                requestAnimFrame(animateScroll);
            } else {
                if (callback && typeof(callback) === 'function') {
                    // the animation is done so lets callback
                    callback();
                }
            }
        };
        animateScroll();
    }