Подскажите пожалуйста почему ссылки в html документе не работают, может это ли связано с js?
вот код html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="index2.html" />
<link rel="stylesheet" href="css/main.css" />
<script src="js/app.js" defer></script>
</head>
<body>
<div class="logo__menu__basket">
<div class="logo">
<img src="images/Untitled.png" alt="" />
</div>
<div class="menu">
<ul>
<li><a href="index2.html">Товары</a></li>
<li><a href="">Оплата</a></li>
<li><a href="">Доставка</a></li>
<li><a href="">О качестве</a></li>
<li><a href="">Контакты</a></li>
<li><a href="">Как сделать заказ</a></li>
</ul>
</div>
<div class="social">
<a class="social-vk" href="https://vk.com/idendy2099"
><img src="images/Untitled.png" alt="" height="50px"
/></a>
<a class="social-vs" href="https://vk.com/idendy2099"
><img src="images/Untitled.png" alt="" height="50px"
/></a>
</div>
<div class="basket-button">
<img src="images/basket.jpg" alt="" height="50px" />
</div>
</div>
<div class="container">
<section class="gallery">
<div class="frame">
<div class="frame__content">
<h2><b>СТИЛЬ ЖИЗНИ</b></h2>
</div>
</div>
<div class="frame">
<div class="frame__content">
<div
class="frame-media frame-media_left"
style="background-image: url(images/1.png)"
></div>
</div>
</div>
<div class="frame frame_bg">
<div class="frame__content">
<video
class="frame-media frame-media_right"
src="media/1.mp4" autoplay loop muted></video>
</div>
</div>
<div class="frame"></div>
<div class="frame">
<div class="frame__content text-right">
<h3>Не будьте как все!</h3>
<p>
Кастомизированная одежда и аксессуары с ручной росписью. Готовые
работы и уникальные на заказ.
</p>
<button>Хочу свой рисунок</button>
</div>
</div>
<div class="frame frame_bg">
<div class="frame__content">
<div
class="frame-media frame-media_left"
style="background-image: url(images/2.png)"
></div>
</div>
</div>
<div class="frame"></div>
<div class="frame frame_bg">
<div class="frame__content">
<div
class="frame-media frame-media_right"
style="background-image: url(images/3.png)"
></div>
</div>
</div>
<div class="frame"></div>
<div class="frame">
<div class="frame__content text-left">
<h3>Кастом уличной одежды в стиле ArtCalligraf</h3>
<p>
Если нужно красиво, выразительно и не банально, то это к нам,
выбирайте. Если хотите мерчи со своими артами, то пишите нам,
звоните, будем рады!
</p>
</div>
</div>
<div class="frame frame_bg">
<div class="frame__content">
<div
class="frame-media frame-media_right"
style="background-image: url(images/4.jpg)"
></div>
</div>
</div>
<div class="frame">
<div class="frame__content">
<video
class="frame-media frame-media_left"
src="media/2.mp4" autoplay loop muted></video>
</div>
</div>
<div class="frame"></div>
<div class="frame"></div>
<div class="frame frame_bg">
<div class="frame__content">
<div
class="frame-media frame-media_right"
style="background-image: url(images/5.jpg)"
></div>
</div>
</div>
<div class="frame frame_bg">
<div class="frame__content">
<video
class="frame-media"
src="media/3.mp4" autoplay loop muted></video>
</div>
</div>
<div class="frame"></div>
<div class="frame"></div>
<div class="frame">
<div class="frame__content"><h5>© IkiGai</h5></div>
</div>
</section>
</div>
</body>
</html>
это код js
let zSpacing = -1000,
lastPos = zSpacing / 5,
$frames = document.getElementsByClassName('frame'),
frames = Array.from($frames),
zVals = []
window.onscroll = function() {
let top = document.documentElement.scrollTop,
delta = lastPos - top
lastPos = top
frames.forEach(function(n, i) {
zVals.push((i * zSpacing) + zSpacing)
zVals[i] += delta * -5.5
let frame = frames[i],
transform = `translateZ(${zVals[i]}px)`,
opacity = zVals[i] < Math.abs(zSpacing) / 1.8 ? 1 : 0
frame.setAttribute('style', `transform: ${transform}; opacity: ${opacity}`)
})
}
window.scrollTo(0, 1)
Источник: Stack Overflow на русском