Are you sure that you have placed the files in same directory? I've tested the code that you have provided and it's working. However you could try this out (a different way of giving sections an id):
<section>
<a id="section1">
CONTENT
</a>
</section>
If you have done this, just use the same way of linking:
<a href="different-page.html#section1">Section One</a>
You need an a-name tag, please see http://www.w3schools.com/tags/att_a_name.asp
I think you are facing this issue with Legacy Browser(IE8 and below). Because I have tested it in firefox, chorm and IE9. It's working fine. But failed in legacy browser.
For that you have to use anchor tag instead of div id.
Example:
<a name="section1"></a>
<section>section content goes here </section>
<a name="section2"></a>
<section>section content goes here </section>
<a name="section3"></a>
<section>section content goes here </section>
<a name="section4"></a>
<section>section content goes here </section>
Now you can use any class name you want for your section elements...
Check your javascript code for line that says "event.preventDefault();"
I found this in a w3school bootstrap template that included this command as part of a block that makes a nice scroll to the hashtag. Once I commented it out, the links worked fine.