White Space between the Title and Web Browsers

Question

When I use these address \"file:///C:/Users/h/Desktop/test/a.html#cs\", \"file:///C:/Users/h/Desktop/test/a.html#chgd\" or \"file:///C:/Users/h/Desktop/test/a.html#wmnh\" I

Answer 1

Just add some CSS, for example:

h4 {
    margin-top: 20px;
}

You can add this to the h4 tag or the entire body to move the whole page down. To do this, either add this content in a new CSS file and link it in the head like this:

<link href="mynew.css" rel="stylesheet"/>

Or you could add it directly in the page by wrapping it in a style tag:

<style>
    h4 {
        margin-top: 20px;
    }
</style>

An an (extreme) example to demonstrate:

h4 {
  margin-top: 100px;
}

<h4>This is the title</h4>
This is the body

Answer 2

You can apply top padding to the body element to do that:

body {
    padding-top: 4px; /* Or whatever amount you want */
}

Live Example

Answer 3

I copied your code locally and replaced the local CSS and JS files with CDN links

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.css" rel="stylesheet"/>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>      
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>        

Then after

$('#' + hash + '_c').addClass('in');

I added

setTimeout(function() {
  window.scrollBy(0,-10);
},0);

(After you expand the desired panel, use scrollBy(0,-10) to scroll up by 10 pixels for example. However, you need to let the browser finishing updating the page layout before invoking scrollBy. This can be achieved using setTimeout with a zero delay).

This works here for me, although sometimes I need to refresh the page to get your accordion code to kick in in the first place.