smoothscroll-angular-custom.js 3.8 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798
  1. /*
  2. * https://github.com/alicelieutier/smoothScroll/
  3. * A teeny tiny, standard compliant, smooth scroll script with ease-in-out effect and no jQuery (or any other dependancy, FWIW).
  4. * MIT License
  5. */
  6. window.smoothScroll = (function(){
  7. // We do not want this script to be applied in browsers that do not support those
  8. // That means no smoothscroll on IE9 and below.
  9. if(document.querySelectorAll === void 0 || window.pageYOffset === void 0 || history.pushState === void 0) { return; }
  10. // Get the top position of an element in the document
  11. var getTop = function(element) {
  12. // return value of html.getBoundingClientRect().top ... IE : 0, other browsers : -pageYOffset
  13. if(element.nodeName === 'HTML') return -window.pageYOffset
  14. return element.getBoundingClientRect().top + window.pageYOffset;
  15. }
  16. // ease in out function thanks to:
  17. // http://blog.greweb.fr/2012/02/bezier-curve-based-easing-functions-from-concept-to-implementation/
  18. var easeInOutCubic = function (t) { return t<.5 ? 4*t*t*t : (t-1)*(2*t-2)*(2*t-2)+1 }
  19. // calculate the scroll position we should be in
  20. // given the start and end point of the scroll
  21. // the time elapsed from the beginning of the scroll
  22. // and the total duration of the scroll (default 500ms)
  23. var position = function(start, end, elapsed, duration) {
  24. if (elapsed > duration) return end;
  25. return start + (end - start) * easeInOutCubic(elapsed / duration); // <-- you can change the easing funtion there
  26. // return start + (end - start) * (elapsed / duration); // <-- this would give a linear scroll
  27. }
  28. // we use requestAnimationFrame to be called by the browser before every repaint
  29. // if the first argument is an element then scroll to the top of this element
  30. // if the first argument is numeric then scroll to this location
  31. // if the callback exist, it is called when the scrolling is finished
  32. var smoothScroll = function(el, duration, callback){
  33. duration = duration || 500;
  34. var start = window.pageYOffset;
  35. if (typeof el === 'number') {
  36. var end = parseInt(el);
  37. } else {
  38. var end = getTop(el);
  39. }
  40. var clock = Date.now();
  41. var requestAnimationFrame = window.requestAnimationFrame ||
  42. window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame ||
  43. function(fn){window.setTimeout(fn, 15);};
  44. var step = function(){
  45. var elapsed = Date.now() - clock;
  46. window.scroll(0, position(start, end, elapsed, duration));
  47. if (elapsed > duration) {
  48. if (typeof callback === 'function') {
  49. callback(el);
  50. }
  51. } else {
  52. requestAnimationFrame(step);
  53. }
  54. }
  55. step();
  56. }
  57. var linkHandler = function(ev) {
  58. ev.preventDefault();
  59. if (location.hash !== this.hash) {
  60. //NOTE(@ajoslin): Changed this line to stop $digest errors
  61. //window.history.pushState(null, null, this.hash)
  62. angular.element(document).injector().get('$location').hash(this.hash);
  63. }
  64. // using the history api to solve issue #1 - back doesn't work
  65. // most browser don't update :target when the history api is used:
  66. // THIS IS A BUG FROM THE BROWSERS.
  67. // change the scrolling duration in this call
  68. var targetEl = document.getElementById(this.hash.substring(1));
  69. if (targetEl) {
  70. smoothScroll(document.getElementById(this.hash.substring(1)), 500, function(el) {
  71. location.replace('#' + el.id)
  72. // this will cause the :target to be activated.
  73. });
  74. }
  75. }
  76. // We look for all the internal links in the documents and attach the smoothscroll function
  77. document.addEventListener("DOMContentLoaded", function () {
  78. var internal = document.querySelectorAll('a[href^="#"]'), a;
  79. for(var i=internal.length; a=internal[--i];){
  80. a.addEventListener("click", linkHandler, false);
  81. }
  82. });
  83. // return smoothscroll API
  84. return smoothScroll;
  85. })();