javascript - 一页滚动问题

Question

我正在使用免费的 wordpress 主题(我知道，这是问题的一部分:)。这是一个带有粘性标题的单页滚动主题。问题是链接没有到达部分的顶部 - 它们滚动过去。我确实使用 CSS 来增加页眉的大小。如果这会造成很大的影响，我该如何在编码中更正它？

网站:http://whatsahead.com/closuremediatest/ (在作品中)

最奇怪的是它在该部分的落脚点甚至都不一致。可能是什么原因造成的？

我编辑的 CSS:

`.navbar-collapse {
    border-top: 1px solid transparent;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset;
    overflow-x: visible;
    margin-left: 155px !important;
    padding-right: 15px;
  padding-left: 15px;
  background: #000;
      margin-bottom: 30px !important;
    margin-left: 195px !important;
    margin-top: 50px;
    max-height: 65px;
}

#navigation .navbar-nav {
    float: left;
}

#navigation .navbar-nav > li > a {
    font-family: "aleolight";
    font-size: 20px;
    font-weight: normal;
    padding-bottom: 30px;
    padding-top: 20px;
}

.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
    background-color: none !important;
    color: #b4d333 !important;
}

.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
    background-color: none;
    color: #b4d333 !important;
}

.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
    background-color: transparent !important;
}

.navbar-default .navbar-nav > li > a {
    color: #fff;
}

.navbar-default .navbar-nav > li > a:before {
    background-color: transparent;
    background-image: url("http://whatsahead.com/closuremediatest/wp-content/uploads/2015/01/arrow-down.png");
    background-position: 40% 40%;
    background-repeat: no-repeat;
    content: "";
    display: block;
    height: 11px;
    left: 0px;
    position: absolute;
    margin-top: 8px;
    width: 18px;
}

#masthead.sticky #navigation .navbar-nav > li > a {
    padding: 17px 25px;
}` 

Javascript 滚动到:

    ;(function (define) {
    'use strict';
    define(['jquery'], function ($) {

        var $scrollTo = $.scrollTo = function( target, duration, settings ) {
            return $(window).scrollTo( target, duration, settings );
        };

        $scrollTo.defaults = {
            axis:'xy',
            duration: 0,
            limit:true
        };

        // Returns the element that needs to be animated to scroll the window.
        // Kept for backwards compatibility (specially for localScroll & serialScroll)
        $scrollTo.window = function( scope ) {
            return $(window)._scrollable();
        };

        // Hack, hack, hack :)
        // Returns the real elements to scroll (supports window/iframes, documents and regular nodes)
        $.fn._scrollable = function() {
            return this.map(function() {
                var elem = this,
                    isWin = !elem.nodeName || $.inArray( elem.nodeName.toLowerCase(),    
    ['iframe','#document','html','body'] ) != -1;

                    if (!isWin)
                        return elem;

                var doc = (elem.contentWindow || elem).document || elem.ownerDocument || elem;

                return /webkit/i.test(navigator.userAgent) || doc.compatMode == 'BackCompat' ?
                    doc.body :
                    doc.documentElement;
            });
        };

        $.fn.scrollTo = function( target, duration, settings ) {
            if (typeof duration == 'object') {
                settings = duration;
                duration = 0;
            }
            if (typeof settings == 'function')
                settings = { onAfter:settings };

            if (target == 'max')
                target = 9e9;

            settings = $.extend( {}, $scrollTo.defaults, settings );
            // Speed is still recognized for backwards compatibility
            duration = duration || settings.duration;
            // Make sure the settings are given right
            settings.queue = settings.queue && settings.axis.length > 1;

            if (settings.queue)
                // Let's keep the overall duration
                duration /= 2;
            settings.offset = both( settings.offset );
            settings.over = both( settings.over );

            return this._scrollable().each(function() {
                // Null target yields nothing, just like jQuery does
                if (target == null) return;

                var elem = this,
                    $elem = $(elem),
                    targ = target, toff, attr = {},
                    win = $elem.is('html,body');

                switch (typeof targ) {
                    // A number will pass the regex
                    case 'number':
                    case 'string':
                        if (/^([+-]=?)?\d+(\.\d+)?(px|%)?$/.test(targ)) {
                            targ = both( targ );
                            // We are done
                            break;
                        }
                        // Relative/Absolute selector, no break!
                        targ = win ? $(targ) : $(targ, this);
                        if (!targ.length) return;
                    case 'object':
                        // DOMElement / jQuery
                        if (targ.is || targ.style)
                            // Get the real position of the target
                            toff = (targ = $(targ)).offset();
                }

                var offset = $.isFunction(settings.offset) && settings.offset(elem, targ) || 
    settings.offset;

                $.each( settings.axis.split(''), function( i, axis ) {
                    var Pos = axis == 'x' ? 'Left' : 'Top',
                        pos = Pos.toLowerCase(),
                        key = 'scroll' + Pos,
                        old = elem[key],
                        max = $scrollTo.max(elem, axis);

                    if (toff) {// jQuery / DOMElement
                        attr[key] = toff[pos] + ( win ? 0 : old - $elem.offset()[pos] );

                        // If it's a dom element, reduce the margin
                        if (settings.margin) {
                            attr[key] -= parseInt(targ.css('margin'+Pos)) || 0;
                            attr[key] -= parseInt(targ.css('border'+Pos+'Width')) || 0;
                        }

                        attr[key] += offset[pos] || 0;

                        if(settings.over[pos])
                            // Scroll to a fraction of its width/height
                            attr[key] += targ[axis=='x'?'width':'height']() * settings.over[pos];
                    } else {
                        var val = targ[pos];
                        // Handle percentage values
                        attr[key] = val.slice && val.slice(-1) == '%' ?
                            parseFloat(val) / 100 * max
                            : val;
                    }

                    // Number or 'number'
                    if (settings.limit && /^\d+$/.test(attr[key]))
                        // Check the limits
                        attr[key] = attr[key] <= 0 ? 0 : Math.min( attr[key], max );

                    // Queueing axes
                    if (!i && settings.queue) {
                        // Don't waste time animating, if there's no need.
                        if (old != attr[key])
                            // Intermediate animation
                            animate( settings.onAfterFirst );
                        // Don't animate this axis again in the next iteration.
                        delete attr[key];
                    }
                });

                animate( settings.onAfter );

                function animate( callback ) {
                    $elem.animate( attr, duration, settings.easing, callback && function() {
                        callback.call(this, targ, settings);
                    });
                }
            }).end();
        };

        // Max scrolling position, works on quirks mode
        // It only fails (not too badly) on IE, quirks mode.
        $scrollTo.max = function( elem, axis ) {
            var Dim = axis == 'x' ? 'Width' : 'Height',
                scroll = 'scroll'+Dim;

            if (!$(elem).is('html,body'))
                return elem[scroll] - $(elem)[Dim.toLowerCase()]();

            var size = 'client' + Dim,
                html = elem.ownerDocument.documentElement,
                body = elem.ownerDocument.body;

            return Math.max( html[scroll], body[scroll] ) - Math.min( html[size]  , body[size]   );
        };

        function both( val ) {
            return $.isFunction(val) || $.isPlainObject(val) ? val : { top:val, left:val };
        }

        // AMD requirement
        return $scrollTo;
    })
    }(typeof define === 'function' && define.amd ? define : function (deps, factory) {
    if (typeof module !== 'undefined' && module.exports) {
        // Node
        module.exports = factory(require('jquery'));
    } else {
        factory(jQuery);
    }
    }));

Javascript 平滑滚动:

 function ssc_init() {
  if (!document.body) return;
  var e = document.body;
  var t = document.documentElement;
  var n = window.innerHeight;
  var r = e.scrollHeight;
  ssc_root = document.compatMode.indexOf("CSS") >= 0 ? t : e;
  ssc_activeElement = e;
  ssc_initdone = true;
  if (top != self) {
    ssc_frame = true
  } else if (r > n && (e.offsetHeight <= n || t.offsetHeight <= n)) {
    ssc_root.style.height = "auto";
    if (ssc_root.offsetHeight <= n) {
      var i = document.createElement("div");
      i.style.clear = "both";
      e.appendChild(i)
    }
  }
  if (!ssc_fixedback) {
    e.style.backgroundAttachment = "scroll";
    t.style.backgroundAttachment = "scroll"
  }
  if (ssc_keyboardsupport) {
    ssc_addEvent("keydown", ssc_keydown)
  }
}

function ssc_scrollArray(e, t, n, r) {
  r || (r = 1e3);
  ssc_directionCheck(t, n);
  ssc_que.push({
    x: t,
    y: n,
    lastX: t < 0 ? .99 : -.99,
    lastY: n < 0 ? .99 : -.99,
    start: +(new Date)
  });
  if (ssc_pending) {
    return
  }
  var i = function() {
    var s = +(new Date);
    var o = 0;
    var u = 0;
    for (var a = 0; a < ssc_que.length; a++) {
      var f = ssc_que[a];
      var l = s - f.start;
      var c = l >= ssc_animtime;
      var h = c ? 1 : l / ssc_animtime;
      if (ssc_pulseAlgorithm) {
        h = ssc_pulse(h)
      }
      var p = f.x * h - f.lastX >> 0;
      var d = f.y * h - f.lastY >> 0;
      o += p;
      u += d;
      f.lastX += p;
      f.lastY += d;
      if (c) {
        ssc_que.splice(a, 1);
        a--
      }
    }
    if (t) {
      var v = e.scrollLeft;
      e.scrollLeft += o;
      if (o && e.scrollLeft === v) {
        t = 0
      }
    }
    if (n) {
      var m = e.scrollTop;
      e.scrollTop += u;
      if (u && e.scrollTop === m) {
        n = 0
      }
    }
    if (!t && !n) {
      ssc_que = []
    }
    if (ssc_que.length) {
      setTimeout(i, r / ssc_framerate + 1)
    } else {
      ssc_pending = false
    }
  };
  setTimeout(i, 0);
  ssc_pending = true
}

function ssc_wheel(e) {
  if (!ssc_initdone) {
    ssc_init()
  }
  var t = e.target;
  var n = ssc_overflowingAncestor(t);
  if (!n || e.defaultPrevented || ssc_isNodeName(ssc_activeElement, "embed") || ssc_isNodeName(t, "embed") && /\.pdf/i.test(t.src)) {
    return true
  }
  var r = e.wheelDeltaX || 0;
  var i = e.wheelDeltaY || 0;
  if (!r && !i) {
    i = e.wheelDelta || 0
  }
  if (Math.abs(r) > 1.2) {
    r *= ssc_stepsize / 120
  }
  if (Math.abs(i) > 1.2) {
    i *= ssc_stepsize / 120
  }
  ssc_scrollArray(n, -r, -i);
  e.preventDefault()
}

function ssc_keydown(e) {
  var t = e.target;
  var n = e.ctrlKey || e.altKey || e.metaKey;
  if (/input|textarea|embed/i.test(t.nodeName) || t.isContentEditable || e.defaultPrevented || n) {
    return true
  }
  if (ssc_isNodeName(t, "button") && e.keyCode === ssc_key.spacebar) {
    return true
  }
  var r, i = 0,
      s = 0;
  var o = ssc_overflowingAncestor(ssc_activeElement);
  var u = o.clientHeight;
  if (o == document.body) {
    u = window.innerHeight
  }
  switch (e.keyCode) {
  case ssc_key.up:
    s = -ssc_arrowscroll;
    break;
  case ssc_key.down:
    s = ssc_arrowscroll;
    break;
  case ssc_key.spacebar:
    r = e.shiftKey ? 1 : -1;
    s = -r * u * .9;
    break;
  case ssc_key.pageup:
    s = -u * .9;
    break;
  case ssc_key.pagedown:
    s = u * .9;
    break;
  case ssc_key.home:
    s = -o.scrollTop;
    break;
  case ssc_key.end:
    var a = o.scrollHeight - o.scrollTop - u;
    s = a > 0 ? a + 10 : 0;
    break;
  case ssc_key.left:
    i = -ssc_arrowscroll;
    break;
  case ssc_key.right:
    i = ssc_arrowscroll;
    break;
  default:
    return true
  }
  ssc_scrollArray(o, i, s);
  e.preventDefault()
}

function ssc_mousedown(e) {
  ssc_activeElement = e.target
}

function ssc_setCache(e, t) {
  for (var n = e.length; n--;) ssc_cache[ssc_uniqueID(e[n])] = t;
  return t
}

function ssc_overflowingAncestor(e) {
  var t = [];
  var n = ssc_root.scrollHeight;
  do {
    var r = ssc_cache[ssc_uniqueID(e)];
    if (r) {
      return ssc_setCache(t, r)
    }
    t.push(e);
    if (n === e.scrollHeight) {
      if (!ssc_frame || ssc_root.clientHeight + 10 < n) {
        return ssc_setCache(t, document.body)
      }
    } else if (e.clientHeight + 10 < e.scrollHeight) {
      overflow = getComputedStyle(e, "").getPropertyValue("overflow");
      if (overflow === "scroll" || overflow === "auto") {
        return ssc_setCache(t, e)
      }
    }
  } while (e = e.parentNode)
}

function ssc_addEvent(e, t, n) {
  window.addEventListener(e, t, n || false)
}

function ssc_removeEvent(e, t, n) {
  window.removeEventListener(e, t, n || false)
}

function ssc_isNodeName(e, t) {
  return e.nodeName.toLowerCase() === t.toLowerCase()
}

function ssc_directionCheck(e, t) {
  e = e > 0 ? 1 : -1;
  t = t > 0 ? 1 : -1;
  if (ssc_direction.x !== e || ssc_direction.y !== t) {
    ssc_direction.x = e;
    ssc_direction.y = t;
    ssc_que = []
  }
}

function ssc_pulse_(e) {
  var t, n, r;
  e = e * ssc_pulseScale;
  if (e < 1) {
    t = e - (1 - Math.exp(-e))
  } else {
    n = Math.exp(-1);
    e -= 1;
    r = 1 - Math.exp(-e);
    t = n + r * (1 - n)
  }
  return t * ssc_pulseNormalize
}

function ssc_pulse(e) {
  if (e >= 1) return 1;
  if (e <= 0) return 0;
  if (ssc_pulseNormalize == 1) {
    ssc_pulseNormalize /= ssc_pulse_(1)
  }
  return ssc_pulse_(e)
}

var ssc_framerate = 150;
var ssc_animtime = 500;
var ssc_stepsize = 150;
var ssc_pulseAlgorithm = true;
var ssc_pulseScale = 6;
var ssc_pulseNormalize = 1;
var ssc_keyboardsupport = true;
var ssc_arrowscroll = 50;
var ssc_frame = false;
var ssc_direction = {
  x: 0,
  y: 0
};

var ssc_initdone = false;
var ssc_fixedback = true;
var ssc_root = document.documentElement;
var ssc_activeElement;
var ssc_key = {
  left: 37,
  up: 38,
  right: 39,
  down: 40,
  spacebar: 32,
  pageup: 33,
  pagedown: 34,
  end: 35,
  home: 36
};

var ssc_que = [];
var ssc_pending = false;
var ssc_cache = {};

setInterval(function() {
  ssc_cache = {}
}, 10 * 1e3);

var ssc_uniqueID = function() {
  var e = 0;
  return function(t) {
    return t.ssc_uniqueID || (t.ssc_uniqueID = e++)
  }
}();

var ischrome = /chrome/.test(navigator.userAgent.toLowerCase());

if (ischrome) {
  ssc_addEvent("mousedown", ssc_mousedown);
  ssc_addEvent("mousewheel", ssc_wheel);
  ssc_addEvent("load", ssc_init)
}

Answer 1

这不是 Javascript 问题，而是 CSS 问题。

首先你的logo img太大了。它正在插入导航栏并使计算不匹配。让我们修复它:

.navbar-brand img {
    max-height: 110px;
}

然后我们必须在页面内容的顶部添加边距。

.title-area, .page-content {
    margin-top: 40px;
}

将它添加到您的 custom.csss 中，它将解决您的问题