diff --git a/example.html b/example.html index 8098b9e..5899156 100644 --- a/example.html +++ b/example.html @@ -22,10 +22,18 @@ :target { background-color: yellow; } + .smooth-scroll-header { + position: fixed; + top: 0; left: 0; + width: 100%; height: 60px; + box-shadow: 0 0 5px 0 rgba(0, 0, 0, .7); + background-color: #ffffff; + z-index: 100; + } - +
custom header
diff --git a/smoothscroll.js b/smoothscroll.js index 7c6d538..ad5aa6f 100644 --- a/smoothscroll.js +++ b/smoothscroll.js @@ -51,7 +51,8 @@ var position = function(start, end, elapsed, duration) { // if the first argument is numeric then scroll to this location // if the callback exist, it is called when the scrolling is finished // if context is set then scroll that element, else scroll window -var smoothScroll = function(el, duration, callback, context){ +// if marginTop is set then scroll will be smaller for this value (helper when site has fixed header/top) +var smoothScroll = function(el, duration, callback, context, marginTop){ duration = duration || 500; context = context || window; var start = window.pageYOffset; @@ -61,6 +62,11 @@ var smoothScroll = function(el, duration, callback, context){ } else { var end = getTop(el); } + + if (typeof(marginTop) === 'number') { + end -= marginTop; + } + console.log(marginTop); var clock = Date.now(); var requestAnimationFrame = window.requestAnimationFrame || @@ -97,11 +103,11 @@ var linkHandler = function(ev) { // change the scrolling duration in this call var node = document.getElementById(this.hash.substring(1)) if(!node) return; // Do not scroll to non-existing node - - smoothScroll(node, 500, function(el) { - location.replace('#' + el.id) - // this will cause the :target to be activated. - }); + + var fixedHeader = document.querySelector('.smooth-scroll-header'), headerHeight = 0; + if (fixedHeader) headerHeight = fixedHeader.offsetHeight; + + smoothScroll(node, 500, false, false, headerHeight); } // We look for all the internal links in the documents and attach the smoothscroll function diff --git a/smoothscroll.min.js b/smoothscroll.min.js index 2e59dc2..c093900 100644 --- a/smoothscroll.min.js +++ b/smoothscroll.min.js @@ -1 +1 @@ -!function(e,t){"use strict";"function"==typeof define&&define.amd?define(t):"object"==typeof exports&&"object"==typeof module?module.exports=t():e.smoothScroll=t()}(this,function(){"use strict";if("object"==typeof window&&void 0!==document.querySelectorAll&&void 0!==window.pageYOffset&&void 0!==history.pushState){var e=function(e){return"HTML"===e.nodeName?-window.pageYOffset:e.getBoundingClientRect().top+window.pageYOffset},t=function(e){return.5>e?4*e*e*e:(e-1)*(2*e-2)*(2*e-2)+1},n=function(e,n,o,i){return o>i?n:e+(n-e)*t(o/i)},o=function(t,o,i,r){o=o||500,r=r||window;var u=window.pageYOffset;if("number"==typeof t)var a=parseInt(t);else var a=e(t);var d=Date.now(),f=window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||function(e){window.setTimeout(e,15)},s=function(){var e=Date.now()-d;r!==window?r.scrollTop=n(u,a,e,o):window.scroll(0,n(u,a,e,o)),e>o?"function"==typeof i&&i(t):f(s)};s()},i=function(e){e.preventDefault(),location.hash!==this.hash&&window.history.pushState(null,null,this.hash),o(document.getElementById(this.hash.substring(1)),500,function(e){location.replace("#"+e.id)})};return document.addEventListener("DOMContentLoaded",function(){for(var e,t=document.querySelectorAll('a[href^="#"]:not([href="#"])'),n=t.length;e=t[--n];)e.addEventListener("click",i,!1)}),o}}); +!function(a,b){"use strict";"function"==typeof define&&define.amd?define(b):"object"==typeof exports&&"object"==typeof module?module.exports=b():a.smoothScroll=b()}(this,function(){"use strict";if("object"==typeof window&&void 0!==document.querySelectorAll&&void 0!==window.pageYOffset&&void 0!==history.pushState){var a=function(a){return"HTML"===a.nodeName?-window.pageYOffset:a.getBoundingClientRect().top+window.pageYOffset},b=function(a){return a<.5?4*a*a*a:(a-1)*(2*a-2)*(2*a-2)+1},c=function(a,c,d,e){return d>e?c:a+(c-a)*b(d/e)},d=function(b,d,e,f,g){d=d||500,f=f||window;var h=window.pageYOffset;if("number"==typeof b)var i=parseInt(b);else var i=a(b);"number"==typeof g&&(i-=g),console.log(g);var j=Date.now(),k=window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||function(a){window.setTimeout(a,15)},l=function(){var a=Date.now()-j;f!==window?f.scrollTop=c(h,i,a,d):window.scroll(0,c(h,i,a,d)),a>d?"function"==typeof e&&e(b):k(l)};l()},e=function(a){a.preventDefault(),location.hash!==this.hash&&window.history.pushState(null,null,this.hash);var b=document.getElementById(this.hash.substring(1));if(b){var c=document.querySelector(".smooth-scroll-header"),e=0;c&&(e=c.offsetHeight),d(b,500,!1,!1,e)}};return document.addEventListener("DOMContentLoaded",function(){for(var b,a=document.querySelectorAll('a[href^="#"]:not([href="#"])'),c=a.length;b=a[--c];)b.addEventListener("click",e,!1)}),d}}); \ No newline at end of file