панель навигации, имеющая ссылку, которая при нажатии переходит к определенному элементу

#javascript

Вопрос:

 <ul id='nav'>
<script>
var head={{ head | safe }};
for(let key in head){
var str="<li><a id='1' href='#' onclick='MyFunction("   key  ");'>"  key  " 
</a></li>"; 
document.getElementById('nav').innerHTML  = str;
}
</script>
</ul>
<script>
function MyFunction(key){
console.log(key)
var vv=document.getElementById(key);
vv.scrollIntoView()
vv.scrollIntoView();
}
</script>

По сути, я пытаюсь создать панель навигации, которая будет направлять пользователя к данному элементу div при нажатии, поэтому, если ключ совпадает с div и link, передавая через него функцию, тогда она будет прокручиваться к определенному элементу div.

и ошибка, которую я получаю, является неперехваченной SyntaxError: отсутствует) после списка аргументов

Ответ №1:

Кажется, ваш фрагмент содержит шаблоны на стороне сервера ( {{ head | safe }} ).

То, о чем вы просите, может быть сделано с использованием только HTML. Итак, если вы используете шаблоны на стороне сервера, вы могли бы просто отобразить это следующим образом. Но дело в том, что даже если вы визуализируете его с помощью Javascript в своем браузере, вам все равно не нужно использовать scrollIntoView() . Если у вас есть <a> элемент, href="#id" где id — идентификатор элемента другого элемента на странице, браузер будет прокручивать его.

 .spacer {
  height: 300px;
  background-color: black;
}

 <ul id="nav">
  <li>
    <a href="#entry1">entry1</a>
  </li>
  <li>
    <a href="#entry2">entry2</a>
  </li>
  <li>
    <a href="#entry3">entry3</a>
  </li>
</ul>
<div class="spacer"></div>
<div id="entry1">entry1</div>
<div class="spacer"></div>
<div id="entry2">entry2</div>
<div class="spacer"></div>
<div id="entry3">entry3</div>
<div class="spacer"></div>