title: How do I fix this jQuery conflict relating to scrolling?
body: <p>It came up in another question that I have a jQuery conflict that is preventing my 'scroll to top' code from working. </p>
  
  <p>I'm using Wordpress which loads jQuery 1.12.3 in no-conflict mode. </p>
  
  <p>I have the following code which is used to scroll down from my post title and image to the actual content.</p>
  
  <pre><code>// Smooth scroll to content
  var $ = jQuery.noConflict();
  
  $(document).ready(function(){
      $('a[href^="#"]').on('click',function (e) {
          e.preventDefault();
  
          var target = this.hash;
          var $target = $(target);
  
          $('html, body').stop().animate({
              'scrollTop': $target.offset().top - 50
          }, 900, 'swing', function () {
              window.location.hash = target;
          });
      });
  });
  </code></pre>
  
  <p>Then on the same page, I have the following code, that allows users to scroll to the top.</p>
  
  <pre><code>jQuery(document).ready(function($){ 
      $(window).scroll(function(){ 
          if ($(this).scrollTop() &gt; 100) { 
              $('.scrollup').fadeIn(); 
          } else { 
              $('.scrollup').fadeOut(); 
          } 
      }); 
      $('.scrollup').click(function(){ 
          $("html, body").animate({ scrollTop: 0 }, 600); 
          return false; 
      }); 
  });
  </code></pre>
  
  <p>Now if i remove the scroll to content code at the top, then the scroll to top code works fine, but with both them present on the page, only the former works. </p>
  
  <p>When the 'scroll to top' code is present on the page, the browser gives the error <code>TypeError: undefined is not an object (evaluating '$target.offset().top')</code></p>