Making a navigation bar and using javascript to scroll to the element


(Saurabh Kapoor) #1

here is the html code

div{ margin-left: 17%; }

mark.lock{
background-color: #7CFC00;
color: black;
}
mark.active{
background-color: #7CFC00;
color: black;
}
mark.stuck{
background-color: rgb(255, 102, 102);
color: black;
}
mark.standby{
background-color: rgb(217, 217, 217);
color: black;
}
mark.runnable{
background-color: #7CFC00;
color: black;
}
mark.timed_waiting{
background-color: rgb(255, 102, 102);
color: black;
}
mark.blocked{
background-color: rgb(255, 102, 102);
color: black;
}
mark.waiting{
background-color: rgb(255, 102, 102);
color: black;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 15%;
background-color: #f1f1f1;
position: fixed;
height: 100%;
overflow: auto;
}

li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}

li a.active {
background-color: #4CAF50;
color: white;
}

li a:hover:not(.active) {
background-color: green;
color: white;
}

    {% for key,value in head.items %}
  • {{key}}

  • {% endfor %}

Thread Count

so i am trying to make a navigation bar and when i click on the link of the navigation bar it should scroll down to the paritcular element . the function named as MyFunction() get the key element and scroll down to the particular div element . so when i click on the link of the navigation bar nothing happens

(Khalil Mehtal) #2

you dont need js at all to do that it’s simple css just add an id to your elements and and href="#elementid" in your nav i made an example here for you https://jsfiddle.net/Lc2r3j61/1/