Posted By

miha on 07/28/14


Tagged


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

Beppoi


Bootstrap ScrollSpy alternative with animation


 / Published in: JavaScript
 

Mousewheel scrolls the whole section (<div>). Click link in header menu to scroll to appropriate div.

  1. // http://stackoverflow.com/a/14805098/1677077
  2. // http://stackoverflow.com/a/9028213/1677077
  3. // jquery-mousewheel plugin needed: https://github.com/brandonaaron/jquery-mousewheel/tree/4.0.x
  4. // HTML Markup example:
  5. // <div id="header"><ul><li><a href="#idofdiv1">Scroll to div1</a></li></ul></div>...<div id="idofdiv1">...</div>
  6.  
  7. $(function(){
  8. var $window = $(window);
  9. var timeStamp = new Date().getTime();
  10. var $header = $('#header');
  11. var $header_li = $header.find("ul li a[href^='#']");
  12. var header_height = ($header.css('position') == 'fixed') ? Math.round($header.outerHeight(true)) : 0;
  13. $header_li.on('click',function(e){
  14. e.preventDefault();
  15. var hash = this.hash;
  16. var $this = $(this);
  17. $('html, body').finish().animate({
  18. //scrollTop: Math.round($(this.hash).offset().top)-header_height
  19. scrollTop: Math.round($(this.hash).offset().top)
  20. },450,function(){
  21. $header_li.removeClass('active');
  22. $this.addClass('active');
  23. //window.location.hash = hash;
  24. });
  25. });
  26. $window.on('scroll',function(){
  27. $this = $(this);
  28. for(var i = 0; i < $header_li.length; i++) {
  29. //if(Math.round($this.scrollTop()) < (Math.round($($($header_li[i]).attr('href')).offset().top)-header_height)) {
  30. if(Math.round($this.scrollTop()) < Math.round($($($header_li[i]).attr('href')).offset().top)) {
  31. $($header_li[i]).removeClass('active');
  32. }
  33. else {
  34. $($header_li[i]).addClass('active');
  35. if(typeof $header_li[i+1] != 'undefined') {
  36. //if(Math.round($this.scrollTop()) >= (Math.round($($($header_li[i+1]).attr('href')).offset().top)-header_height)) {
  37. if(Math.round($this.scrollTop()) >= Math.round($($($header_li[i+1]).attr('href')).offset().top)) {
  38. $($header_li[i]).removeClass('active');
  39. }
  40. }
  41. }
  42. }
  43. });
  44. var mousewheel_sections = [];
  45. for(var i = 0; i < $header_li.length; i++) {
  46. var header_li_href = $($header_li[i]).attr('href');
  47. mousewheel_sections[header_li_href.substr(1)] = i;
  48. $(header_li_href).on('mousewheel',function(e){
  49. $this = $(this);
  50. if(Math.round($window.height()) >= Math.round($this.outerHeight(true)) || (Math.round($(window).scrollTop())-Math.round($this.offset().top)) < header_height) {
  51. var timeNow = new Date().getTime();
  52. var mousewheel_attr = '';
  53. if(typeof e.deltaY != 'undefined' && (timeNow - timeStamp >= 100)) {
  54. timeStamp = timeNow;
  55. if(parseInt(e.deltaY) < 0) {
  56. if(typeof $header_li[mousewheel_sections[$this.attr('id')]-1] != 'undefined' && Math.round($window.height()) >= Math.round($this.outerHeight(true))) {
  57. mousewheel_attr = $($header_li[mousewheel_sections[$this.attr('id')]-1]).attr('href');
  58. }
  59. }
  60. else {
  61. if(parseInt(e.deltaY) > 0) {
  62. if(typeof $header_li[mousewheel_sections[$this.attr('id')]+1] != 'undefined' && Math.round($window.height()) >= Math.round($this.outerHeight(true))) {
  63. mousewheel_attr = $($header_li[mousewheel_sections[$this.attr('id')]+1]).attr('href');
  64. }
  65. }
  66. }
  67. if(mousewheel_attr) {
  68. e.preventDefault();
  69. $('html, body').finish().animate({
  70. //scrollTop: Math.round($(mousewheel_attr).offset().top)-header_height
  71. scrollTop: Math.round($(mousewheel_attr).offset().top)
  72. },450);
  73. }
  74. }
  75. else {
  76. timeStamp = timeNow;
  77. return;
  78. }
  79. }
  80. });
  81. }
  82. });

Report this snippet  

Comments

RSS Icon Subscribe to comments
Posted By: miha on August 5, 2014

<ul><li><a href="#idofdiv1">Scroll to div1</a></li></ul>......

You need to login to post a comment.