0

I have a div that shows letters that index to corresponding definitions on a page like so: 

<div class="row">
    <div class="col-lg-12">
        <h1 class="page-header">Glossary</h1>
        <ol class="breadcrumb">
            <li><a href="index.html">Home</a></li>
            <li><a href="#A">A</a></li>
            <li><a href="#B">B</a></li>
            <li><a href="#C">C</a></li>
            <li><a href="#D">D</a></li>
            <li><a href="#E">E</a></li>
            <li><a href="#F">F</a></li>
            <li><a href="#G">G</a></li>
            <li class="active">H</li>
            <li><a href="#I">I</a></li>
            <li class="active">J</li>
            <li class="active">K</li>
            <li><a href="#L">L</a></li>
            <li><a href="#M">M</a></li>
            <li class="active">N</li>
            <li class="active">O</li>
            <li><a href="#P">P</a></li>
            <li class="active">Q</li>
            <li><a href="#R">R</a></li>
            <li><a href="#S">S</a></li>
            <li><a href="#T">T</a></li>
            <li><a href="#U">U</a></li>
            <li class="active">V</li>
            <li class="active">W</li>
            <li class="active">X</li>
            <li class="active">Y</li>
            <li class="active">Z</li>
        </ol>
    </div>
</div>

For example, the "A" index looks as so: 

 <div class="col-xl-1">
    <div class="panel panel-default">
        <div class="panel-heading">
            <a id="A"><h4>A</h4></a>
        </div>

with a panel-body giving a series of p tags for definitions. How can I add "padding" to where it indexes to? For example, when you click the A it takes you to the first definition, but I would like it to be about 100 pixels higher

Jon Uleis
  • 17,693
  • 2
  • 33
  • 42
  • 1
    Possible duplicate of [Make anchor link go some pixels above where it's linked to](https://stackoverflow.com/questions/17534661/make-anchor-link-go-some-pixels-above-where-its-linked-to) – Jon Uleis Aug 17 '17 at 00:29
  • sort of. I simply just want the page to be 100px higher than it is for each anchor. –  Aug 17 '17 at 00:35
  • Yep, that's all covered in the linked question, which is exactly the same issue. – Jon Uleis Aug 17 '17 at 00:38
  • the ones on that page seem to simply move the actual "A" text up, rather than controlling how far the page scrolls –  Aug 17 '17 at 00:57
  • I can assure you, those solutions are answers to specifically the same problem you have here. No good would be accomplished by moving the text up itself. Is it possible you haven't fully implemented the solutions you've tried? – Jon Uleis Aug 17 '17 at 01:00

0 Answers0