I'm using an anchor link to scroll to a div on another page containing the id="contact" tag. 

I have tried to use the header background image div 'head-bg' for the offsetSize, 

1. Uncaught TypeError: Cannot read property 'top' of undefined, 

I'm an absolute beginner at JQuery.  The code below is a combination from snippets I found available to use online.

If I understand correctly, the error is saying 'head-bg' is not defined.  I have tried too many different ways of defining 'head-bg' to list here; but, I'm not getting anywhere, so I thought I'd ask for help. 

Below is the code. Thanks.

Anchor on homepage

  

   
 <a href="NewPage.cshtml#contact">Read More</a>
  

Div with id on New Page

   

    
<div class="col-xs-12 contact" id="contact" name="contact">
   

JQuery function

   

    
 // scroll to div on next page
    
 $(document).ready(function() {
    
 var offsetSize = $("div[name='head-bg']").innerHeight();
    
 $("html, body").animate({scrollTop:$(window.location.hash).offset().top-offsetSize }, 500);
    
 });