toc.js 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109
  1. !function($) {
  2. $.fn.toc = function(options) {
  3. var self = this;
  4. var opts = $.extend({}, jQuery.fn.toc.defaults, options);
  5. var container = $(opts.container);
  6. var headings = $(opts.selectors, container);
  7. var headingOffsets = [];
  8. var activeClassName = opts.prefix+'-active';
  9. var findScrollableElement = function(els) {
  10. for (var i = 0, argLength = arguments.length; i < argLength; i++) {
  11. var el = arguments[i],
  12. $scrollElement = $(el);
  13. if ($scrollElement.scrollTop() > 0) {
  14. return $scrollElement;
  15. } else {
  16. $scrollElement.scrollTop(1);
  17. var isScrollable = $scrollElement.scrollTop() > 0;
  18. $scrollElement.scrollTop(0);
  19. if (isScrollable) {
  20. return $scrollElement;
  21. }
  22. }
  23. }
  24. return [];
  25. };
  26. var scrollable = findScrollableElement(opts.container, 'body', 'html');
  27. var scrollTo = function(e) {
  28. if (opts.smoothScrolling) {
  29. e.preventDefault();
  30. var elScrollTo = $(e.target).attr('href');
  31. var $el = $(elScrollTo);
  32. scrollable.animate({ scrollTop: $el.offset().top }, 400, 'swing', function() {
  33. location.hash = elScrollTo;
  34. });
  35. }
  36. $('li', self).removeClass(activeClassName);
  37. $(e.target).parent().addClass(activeClassName);
  38. };
  39. //highlight on scroll
  40. var timeout;
  41. var highlightOnScroll = function(e) {
  42. if (timeout) {
  43. clearTimeout(timeout);
  44. }
  45. timeout = setTimeout(function() {
  46. var top = $(window).scrollTop();
  47. for (var i = 0, c = headingOffsets.length; i < c; i++) {
  48. if (headingOffsets[i] >= top) {
  49. $('li', self).removeClass(activeClassName);
  50. $('li:eq('+(i-1)+')', self).addClass(activeClassName);
  51. break;
  52. }
  53. }
  54. }, 50);
  55. };
  56. if (opts.highlightOnScroll) {
  57. $(window).bind('scroll', highlightOnScroll);
  58. highlightOnScroll();
  59. }
  60. return this.each(function() {
  61. //build TOC
  62. var ul = $('<ul/>');
  63. headings.each(function(i, heading) {
  64. var $h = $(heading);
  65. headingOffsets.push($h.offset().top - opts.highlightOffset);
  66. //add anchor
  67. var anchorName = opts.anchorName(i, heading, opts.prefix);
  68. var anchor = $([]);
  69. if (!document.getElementById(anchorName)) {
  70. anchor = $('<span/>').attr('id', opts.anchorName(i, heading, opts.prefix)).insertBefore($h);
  71. }
  72. //build TOC item
  73. var a = $('<a/>')
  74. .text($h.text())
  75. .attr('href', '#' + anchorName)
  76. .bind('click', scrollTo);
  77. var li = $('<li/>')
  78. .addClass(opts.prefix+'-'+$h[0].tagName.toLowerCase())
  79. .append(a);
  80. ul.append(li);
  81. });
  82. var el = $(this);
  83. el.html(ul);
  84. });
  85. };
  86. jQuery.fn.toc.defaults = {
  87. container: 'body',
  88. selectors: 'h1,h2,h3',
  89. smoothScrolling: true,
  90. prefix: '',
  91. highlightOnScroll: true,
  92. highlightOffset: 100,
  93. anchorName: function(i, heading, prefix) {
  94. return prefix+i;
  95. }
  96. };
  97. }(jQuery);