How to target specific div from another page using jquery? -

so common question guess , got same answers other thread(s) when tried apply answer it's not working in case. want target specific div page using jquery. here code:

   $('a[href^="#"]').on('click', function (e) {      e.preventdefault();     var target = this.hash;     var t = $(this.hash).offset().top;     $('html, body').stop().animate({     scrolltop: t,     }, 1000, function () {         window.location.hash = target;     }); }); 

so example have menu like:

   <ul class="nav navbar-nav">                  <li class="active dropdown">                     <a class="border menu_link_3" href="jewellery">jewellery </a>                     <ul class="dropdown-menu">                         <li><a href="#kalis-pearls">kalis pearls</a></li>                         <li><a href="#mariana">mariana</a></li>                     </ul>                 </li>                 <li class="dropdown">                     <a class="border menu_link_4" href="manufacturing">manufacturing</a>                     <ul class="dropdown-menu">                         <li><a href="#handmade-jewellery">handmade</a></li>                         <li><a href="#computer-graphic-jewellery-design">computer graphic</a></li>                         <li><a href="#gem-sourcing">gem sourcing</a></li>                     </ul>                 </li>             </ul> 

so jewellery active menu , when try go manufacturing menu sub pages gives me error:

 uncaught typeerror: cannot read property 'top' of null 

what i'm missing here?

it sounds trying scroll elements on page don't exist on current page.

you need read hash on page load of new page , scroll ... if element exists

within current code...check if target in page , prevent default, otherwise let browser follow url