Easy Smooth Scroll插件:如何偏移滚动?

时间:2013-07-23 03:24:06

标签: javascript jquery wordpress-plugin smooth-scrolling

我正在使用Easy Smooth Scroll Plugin for Wordpress。

以下是插件使用的.js文件:

var ss = {
fixAllLinks: function() {
    var allLinks = document.getElementsByTagName('a');
    for (var i = 0; i < allLinks.length; i++) {
        var lnk = allLinks[i];
        if ((lnk.href && lnk.href.indexOf('#') != -1) && ((lnk.pathname == location.pathname) || ('/' + lnk.pathname == location.pathname)) && (lnk.search == location.search)) {
            ss.addEvent(lnk, 'click', ss.smoothScroll);
        }
    }
},
smoothScroll: function(e) {
    if (window.event) {
        target = window.event.srcElement;
    } else if (e) {
        target = e.target;
    } else return;
    if (target.nodeName.toLowerCase() != 'a') {
        target = target.parentNode;
    }
    if (target.nodeName.toLowerCase() != 'a') return;
    anchor = target.hash.substr(1);
    var allLinks = document.getElementsByTagName('a');
    var destinationLink = null;
    for (var i = 0; i < allLinks.length; i++) {
        var lnk = allLinks[i];
        if (lnk.name && (lnk.name == anchor)) {
            destinationLink = lnk;
            break;
        }
    }
    if (!destinationLink) destinationLink = document.getElementById(anchor);
    if (!destinationLink) return true;
    var destx = destinationLink.offsetLeft;
    var desty = destinationLink.offsetTop;
    var thisNode = destinationLink;
    while (thisNode.offsetParent && (thisNode.offsetParent != document.body)) {
        thisNode = thisNode.offsetParent;
        destx += thisNode.offsetLeft;
        desty += thisNode.offsetTop;
    }
    clearInterval(ss.INTERVAL);
    cypos = ss.getCurrentYPos();
    ss_stepsize = parseInt((desty - cypos) / ss.STEPS);
    ss.INTERVAL = setInterval('ss.scrollWindow(' + ss_stepsize + ',' + desty + ',"' + anchor + '")', 10);
    if (window.event) {
        window.event.cancelBubble = true;
        window.event.returnValue = false;
    }
    if (e && e.preventDefault && e.stopPropagation) {
        e.preventDefault();
        e.stopPropagation();
    }
},
scrollWindow: function(scramount, dest, anchor) {
    wascypos = ss.getCurrentYPos();
    isAbove = (wascypos < dest);
    window.scrollTo(0, wascypos + scramount);
    iscypos = ss.getCurrentYPos();
    isAboveNow = (iscypos < dest);
    if ((isAbove != isAboveNow) || (wascypos == iscypos)) {
        window.scrollTo(0, dest);
        clearInterval(ss.INTERVAL);
        location.hash = anchor;
    }
},
getCurrentYPos: function() {
    if (document.body && document.body.scrollTop) return document.body.scrollTop;
    if (document.documentElement && document.documentElement.scrollTop) return document.documentElement.scrollTop;
    if (window.pageYOffset) return window.pageYOffset;
    return 0;
},
addEvent: function(elm, evType, fn, useCapture) {
    if (elm.addEventListener) {
        elm.addEventListener(evType, fn, useCapture);
        return true;
    } else if (elm.attachEvent) {
        var r = elm.attachEvent("on" + evType, fn);
        return r;
    } else {
        alert("Handler could not be removed");
    }
}
}
ss.STEPS = 25;
ss.addEvent(window, "load", ss.fixAllLinks);

实况页面位于:http://iamjoepro.com/album/promaha/

我有平滑滚动滚动到锚点,但我想用固定标题的高度(120px)来抵消它

我不是javascript专家,我希望这对某人来说很容易,但是我无法破译在我的.js文件中添加偏移量的位置?

1 个答案:

答案 0 :(得分:0)

我遇到了类似问题,发现以下解决方案对我有用。

更改行:

var desty = destinationLink.offsetTop;

阅读:

var desty = destinationLink.offsetTop - 120;

(其中'120'是固定标题的高度,以像素为单位)

然后,删除以下行:

location.hash = anchor;

(否则,页面将滚动到您的120px偏移,但随后返回到锚点的位置)

希望这有帮助!