HTML使用超链接定位到本页面的某一个元素时，被top-bar挡住，如何设置位置

<h2 id='t1'>Title1</h2>
<!--省略代码若干-->
<a class="txt" href="#t1">定位到Title1</a>

点击这个超链接的的时候，会把title1，定位到页面最顶部。但是页面上本来有一个顶部栏，就不把Title1挡住显示不出来。


所以，有没有什么办法让Title1定位到页面顶部稍微偏下一点点呢？

用js设置，或者定位到t1容器上面的对象，而不是直接对t1定位

<div style="height:50px;position:fixed;left:0;top:0;width:100%;background:rgba(0,0,0,.5)"></div>
<div>
    <br /><br />
    <br /><br />
    <div id="t1_anchor" style="height:30px"></div>
</div>
<h2 id='t1'>Title1</h2>
<div style="height:2000px"></div>
<a class="txt" href="#t1_anchor">定位到Title1</a>

看你的topbar的高度是多少，然后设置title的top