title: Using offset().top with Magento?
body: <p>Have following HTML code</p>
  
  <p>
  </p>
  
  <pre><code>&lt;head&gt;
      &lt;title&gt;onepage scroll&lt;/title&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, minimum-scale=1 user-scalable=no"/&gt;
      &lt;link href="css/test.css" rel="stylesheet" type="text/css"/&gt;  
  &lt;/head&gt;
  
  &lt;body&gt;
  
      &lt;section class="container"&gt;
          &lt;nav class="test-nav"&gt;
              &lt;a href="#" id="sc-head"&gt;Home&lt;/a&gt; 
              &lt;a href="#section_1" id="c1"&gt;Section 1&lt;/a&gt;
              &lt;a href="#section_2" id="c2"&gt;Section 2&lt;/a&gt;
              &lt;a href="#section_3" id="c3"&gt;Section 3&lt;/a&gt;
              &lt;a href="#section_4" id="c4"&gt;Section 4&lt;/a&gt;
              &lt;a href="#section_5" id="c5"&gt;Section 5&lt;/a&gt;
              &lt;a href="#section_6" id="c6"&gt;Section 6&lt;/a&gt;
          &lt;/nav&gt;
  
          &lt;section class="sc sc-head"&gt; 
              &lt;div class="sc-content"&gt;
                  &lt;p&gt;onepage scroll top content &lt;/p&gt;      
              &lt;/div&gt;
          &lt;/section&gt;
  
          &lt;section class="sc c1"&gt;
              &lt;div class="sc-content"&gt;
                  &lt;p&gt;Content 1&lt;/p&gt;
              &lt;/div&gt;
          &lt;/section&gt;
  
          &lt;section class="sc c2"&gt;
              &lt;div class="sc-content"&gt;
                  &lt;p&gt;Content 2&lt;/p&gt;
              &lt;/div&gt;
          &lt;/section&gt;
  
          &lt;section class="sc c3"&gt;
              &lt;div class="sc-content"&gt;
                  &lt;p&gt;Content 3&lt;/p&gt;
              &lt;/div&gt;
          &lt;/section&gt;
  
          &lt;section class="sc c4"&gt;
              &lt;div class="sc-content"&gt;
                  &lt;p&gt;Content 4&lt;/p&gt;
              &lt;/div&gt;
          &lt;/section&gt;
  
          &lt;section class="sc c5"&gt;
              &lt;div class="sc-content"&gt;
                  &lt;p&gt;Content 5&lt;/p&gt;
              &lt;/div&gt;
          &lt;/section&gt;
  
  
          &lt;section class="sc c6"&gt;
              &lt;div class="sc-content"&gt;
                  &lt;p&gt;Content 6&lt;/p&gt;
              &lt;/div&gt;
          &lt;/section&gt;
  
      &lt;/section&gt;
  
      &lt;script type="text/javascript"  src="js/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"  src="js/scroll.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
          jQuery('.test-nav').scroll({'scrollSpeed' : 1000});
      &lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  <p>Now scroll.js</p>
  
  <pre><code>(function($, window, document, undefined) { 
      $.fn.op_scroll = function( options ) {
          $(this).addClass('op-scroller');
          var settings   = $.extend({'scrollSpeed '  : 500}, options);
          var optionLocs = new Array();
          var lastScrollTop = 0;
          var menuHeight    = $(".op-scroller").height();  
          var scroller_head = '.op-scroller';
  
  
          $(window).load(function() {
              if( window.location.hash == "")
                  setTimeout(function() { window.scrollTo(0, 1) }, 100);
              else
                  $("a[href='"+window.location.hash+"']").trigger('click');
          });
  
          return $(scroller_head + ' a').each( function(index) {
  
              if ( settings.scrollSpeed ) {
                  var scrollSpeed = settings.scrollSpeed
              }
  
              var element = $(this);
              var id = element.attr("id");
              optionLocs.push(Array($("."+id).position().top-menuHeight, $("."+id).height()+$("."+id).position().top, id));
  
              var stickyTop = $('.op-scroller').offset().top;   console.log(stickyTop);
              var stickyMenu = function(direction){
                  var scrollTop = $(window).scrollTop(); 
                  if (scrollTop &gt; stickyTop) { 
                      $(scroller_head).css({ 'position': 'fixed', 'top':0 }).addClass('fxd'); 
  
                  } else {
                      $(scroller_head).css({ 'position': 'absolute', 'top':stickyTop }).removeClass('fxd'); 
                  } 
  
                  if(optionLocs[index][0] &lt;= scrollTop &amp;&amp; scrollTop &lt;= optionLocs[index][1]){ 
                      var currnt_id = "#"+id;
                      if(direction == "up"  &amp;&amp;  typeof optionLocs[index+1] != "undefined" ){
                          $(currnt_id).addClass("active");
                          $("#"+optionLocs[index+1][2]).removeClass("active");
                          $(".op-scroller a").removeClass("active");
                          $('#'+id).addClass("active");                           
  
                      } else if(index &gt; 0  &amp;&amp; typeof  optionLocs[index-1] != "undefined") {
                          $(currnt_id).addClass("active");
                          $("#"+optionLocs[index-1][2]).removeClass("active");
                      } else if(direction == undefined){
                          $(currnt_id).addClass("active");
                      }
                  }
              };
              stickyMenu("");
              $(window).scroll(function() {
                  var st = $(this).scrollTop();
                  if (st &gt; lastScrollTop) {
                      direction = "down";
                  } else if (st &lt; lastScrollTop ){
                      direction = "up";
                  }
                  lastScrollTop = st;
                  stickyMenu(direction);
  
                  if($(window).scrollTop() + $(window).height() == $(document).height()) {
                      $('.op-scroller a').removeClass('active');
                      $('.op-scroller a').last().addClass('active');
                  }
              });
  
              $(this).on('click', function(e){
                  var selectorHeight = $(scroller_head).height();
                  e.preventDefault();
                  var id = $(this).attr('id');
                  if ($(this).hasClass("op-scroller-disable"))
                  {
                      return false;
                  }
  
                  var goTo =  $('.'+ id).offset().top -selectorHeight;
                  $("html, body").animate({ scrollTop: goTo }, scrollSpeed);
                  hash = $(this).attr("href");
                  if(hash == "#") hash = ''; else $(scroller_head).css({ 'position': 'fixed', 'top':0 }).addClass('fxd');
                  // alert(hash);
                  window.location.hash = hash;
                  // window.location.hash = $(this).html().charAt(0).toUpperCase() + $(this).html().slice(1);
              }); 
          });
      }
  
  })(jQuery, window, document);
  </code></pre>
  
  <p>I am trying to working one page scroll with given js. It works as expected when i use it as separate example. </p>
  
  <p>Having issue when integrating this js with Magento in following line </p>
  
  <pre><code>var stickyTop = $('.op-scroller').offset().top;   
  console.log(stickyTop); // It gives each 'a' offset top position instead of first one(&lt;a href="#" id="sc-head"&gt;Home&lt;/a&gt;).
  </code></pre>
  
  <p>I suspect with prototype.js library. Kindly advice </p>