practice

　　　　

<html lang="ja">
<meta charset="utf-8">

<style>
nav{position:fixed;
top:40px;
right:140px;
background:#ffffff;
border:1px solid #abcdef;
border-radius:8px;
box-shadow:0 0 5px #dddddd;}
ul{list-style:none;}
a{display:block;
text-decoration:none;
color:#456789;
padding:2px 40px 2px 2px;
transition:all 0.3s;}
p{margin-top:20px;}
img{width:600px;}
</style>

<section id="楽譜_01">
<p><img src="Ravel_01.png"></p>
</section>
<section id="楽譜_02">
<p><img src="Ravel_02.png"></p>
</section>
<section id="楽譜_03">
<p><img src="Ravel_03.png"></p>
</section>
<section id="楽譜_04">
<p><img src="Ravel_04.png"></p>
</section>
<section id="楽譜_05">
<p><img src="Ravel_05.png"></p>
</section>
<nav>
<ul id="ぼっくす">
<li><a href="#楽譜_01">P - 1</a></li>
<li><a href="#楽譜_02">P - 2</a></li>
<li><a href="#楽譜_03">P - 3</a></li>
<li><a href="#楽譜_04">P - 4</a></li>
<li><a href="#楽譜_05">P - 5</a></li>
</ul>
</nav>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="scrolling.js"></script>
<script>
$(window).on("load resize",function()
{幅=window.innerWidth;
ぺーじ=$("nav");
if(幅>=768)
{すくろーる.add(ぺーじ);}
else
{すくろーる.remove(ぺーじ);}});
$("#ぼっくす li a").click(function()
{表示=$(this).attr("href");
ぽじしょん=$(表示).offset().top-0;
$("body,html").animate({scrollTop:ぽじしょん},1000);
return false;});
</script>

</html>