-1
私はアンカータグにリンクされた 'a'タグで完全に埋め込まれた画面の左側にナビゲーションバーがあるウェブサイトを持っています。
私のウェブサイトを使用している間は、ホームページのように必要な曲の壮大なリストを持っていない別のページに行くでしょう。
私はこれらのサブページに「a」タグをクリックすると、ホームページに移動します。もう一度押す必要はなく、対応するアンカータグに自動的にスクロールします。
たとえば、「All Of Me - John Legend」をクリックすると、情報が表示されたページに移動します。
それから（「すべての私」のページで）「ナビゲーション」バーの「G」をクリックすると、ホームページに移動し、「G曲」セクションまでスクロールします。
ここに私のコードがあり、助けてくれてありがとう！曲すなわち（ - ジョン・レジェンド・オブ・ミーすべて）のご情報セクションでリンクとオートスクロールをクリックする
<!DOCTYPE html>
<html>
<head>
<link href="E:/Website/namethatartist/styles/Index_Styling.css" type="text/css" rel="stylesheet" />
<link href="E:/Website/namethatartist/styles/Hover-master/css/hover.css" rel="stylesheet" media="all">
<link href="E:/Website/namethatartist/styles/animate.css-master/animate.min.css" rel="stylesheet">
<title>Name That Artist</title>
<meta name="author" content="Hunter Casteel" />
</head>
<style>
html, body {
margin: 0;
}
/* Navigation Menu Styling */
ul.main-menu {
list-style-type: none;
margin: 0;
padding: 0;
width: 25%;
background-color: #f1f1f1;
position: fixed;
height: 100%;
overflow: auto;
}
ul.main-menu li a {
display: block;
color: #000;
text-decoration: none;
height:3.29999vh;
font-size:2.2vh;
padding:0.15vh 10%;
font-family: Times New Roman;
}
ul.main-menu li a.active {
background-color: #ef402c;
color: white;
}
li a:hover:not(.active) {
background-color: #555;
color: white;
}
/* Text Styling */
h1, h2, p {
font-family: Calibri
}
p a:link, p a:visited{
font-family: Times New Roman;
color: black;
text-decoration: none;
}
p a:hover {
color: red;
}
a {
padding: 2vh 2vh 1px 1px;
}
</style>
<body background="E:/Website/namethatartist/media/images/paper.jpg">
<ul class="main-menu">
<li><a class="hvr-wobble-horizontal active" href="#home">Home</a></li>
<li><a class="hvr-wobble-horizontal" href="#a_songs">A</a></li>
<li><a class="hvr-wobble-horizontal" href="#b_songs">B</a></li>
<li><a class="hvr-wobble-horizontal" href="#c_songs">C</a></li>
<li><a class="hvr-wobble-horizontal" href="#d_songs">D</a></li>
<li><a class="hvr-wobble-horizontal" href="#e_songs">E</a></li>
<li><a class="hvr-wobble-horizontal" href="#f_songs">F</a></li>
<li><a class="hvr-wobble-horizontal" href="#g_songs">G</a></li>
<li><a class="hvr-wobble-horizontal" href="#h_songs">H</a></li>
<li><a class="hvr-wobble-horizontal" href="#i_songs">I</a></li>
<li><a class="hvr-wobble-horizontal" href="#j_songs">J</a></li>
<li><a class="hvr-wobble-horizontal" href="#k_songs">K</a></li>
<li><a class="hvr-wobble-horizontal" href="#l_songs">L</a></li>
<li><a class="hvr-wobble-horizontal" href="#m_songs">M</a></li>
<li><a class="hvr-wobble-horizontal" href="#n_songs">N</a></li>
<li><a class="hvr-wobble-horizontal" href="#o_songs">O</a></li>
<li><a class="hvr-wobble-horizontal" href="#p_songs">P</a></li>
<li><a class="hvr-wobble-horizontal" href="#q_songs">Q</a></li>
<li><a class="hvr-wobble-horizontal" href="#r_songs">R</a></li>
<li><a class="hvr-wobble-horizontal" href="#s_songs">S</a></li>
<li><a class="hvr-wobble-horizontal" href="#t_songs">T</a></li>
<li><a class="hvr-wobble-horizontal" href="#u_songs">U</a></li>
<li><a class="hvr-wobble-horizontal" href="#v_songs">V</a></li>
<li><a class="hvr-wobble-horizontal" href="#w_songs">W</a></li>
<li><a class="hvr-wobble-horizontal" href="#x_songs">X</a></li>
<li><a class="hvr-wobble-horizontal" href="#y_songs">Y</a></li>
<li><a class="hvr-wobble-horizontal" href="#z_songs">Z</a></li>
</ul>
<div style="margin-left:25%;padding:1px 16px;height:1000px;">
<hr id="home"/><hr/>
<h1 class="hvr-underline-from-center animated tada">Welcome To Name That Artist</h2>
<button style="float:right;" class="animated hvr-pop" action="logInPage.php">Log In</button>
<p> You can find information about a song from the wide selection we offer.</p>
<h3>Use the navigation bar on the left to jump to songs with that first letter.</h3>
<hr id="a_songs"/><hr/><p align="center">A</p><hr/>
<div>
<p>
<a id="all_of_me_john_legend" class="hvr-float-shadow" href="songs/a/All_Of_Me_John_Legend.html">All Of Me - John Legend</a>
</p>
</div>
<hr id="b_songs"/><hr/><p align="center">B</p><hr/>
<div>
<p>
<a id="bad_blood_bastille" class="hvr-float-shadow" href="songs/b/Bad_Blood_Bastille.html">Bad Blood - Bastille</a>
<a href="songs/b/.html"> </a>
<a href="songs/b/.html"> </a>
</p>
</div>
<hr id="c_songs"/><hr/><p align="center">C</p><hr/>
<div>
<p>
<a id="cake_by_the_ocean_dnce" class="hvr-float-shadow" href="songs/c/Cake_By_The_Ocean_DNCE.html">Cake By The Ocean - DNCE</a>
<a href="songs/c/.html"> </a>
<a href="songs/c/.html"> </a>
</p>
</div>
<hr id="d_songs"/><hr/><p align="center">D</p><hr/>
<div>
<p>
<a id="dont_stop_believin_journey" class="hvr-float-shadow" href="songs/d/Dont_Stop_Believin_Journey.html">Don't Stop Believin' - Journey</a>
<a href="songs/d/.html"> </a>
<a href="songs/d/.html"> </a>
</p>
</div>
<hr id="e_songs"/><hr/><p align="center">E</p><hr/>
<div>
<p>
<a id="eye_of_the_tiger_survivor" class="hvr-float-shadow" href="songs/e/Eye_Of_The_Tiger_Survivor.html">Eye Of The Tiger - Survivor</a>
<a href="songs/e/.html"> </a>
<a href="songs/e/.html"> </a>
</p>
</div>
<hr id="f_songs"/><hr/><p align="center">F</p><hr/>
<div>
<p>
<a id="feel_good_robin_thicke" class="hvr-float-shadow" href="songs/f/Feel_Good_Robin_Thicke.html">Feel Good - Robin Thicke</a>
<a href="songs/f/.html"> </a>
<a href="songs/f/.html"> </a>
</p>
</div>
<hr id="g_songs" class="revealOnScroll animated bounce"/><hr/><p align="center">G</p><hr/>
<div>
<p>
<a id="geronimo_sheppard" class="hvr-float-shadow" href="songs/g/Geronimo_Sheppard.html">Geronimo - Sheppard</a>
<a href="songs/g/.html"> </a>
<a href="songs/g/.html"> </a>
</p>
</div>
<hr id="h_songs"/><hr/><p align="center">H</p><hr/>
<div>
<p>
<a id="here_alessia_cara" class="hvr-float-shadow" href="songs/h/Here_Alessia_Cara.html">Here - Alessia Cara</a>
<a href="songs/h/.html"> </a>
<a href="songs/h/.html"> </a>
</p>
</div>
<hr id="i_songs"/><hr/><p align="center">I</p><hr/>
<div>
<p>
<a id="i_write_sins_not_tragedies_panic_at_the_disco" class="hvr-float-shadow" href="songs/i/I_Write_Sins_Not_Tragedies_Panic_At_The_Disco.html">I Write Sins Not Tragedies - Panic! At The Disco</a>
<a href="songs/i/.html"> </a>
<a href="songs/i/.html"> </a>
</p>
</div>
<hr id="j_songs"/><hr/><p align="center">J</p><hr/>
<div>
<p>
<a id="just_give_me_a_reason_pink" class="hvr-float-shadow" href="songs/j/Just_Give_Me_A_Reason_Pink.html">Just Give Me A Reason - P!nk</a>
<a href="songs/j/.html"> </a>
<a href="songs/j/.html"> </a>
</p>
</div>
<hr id="k_songs"/><hr/><p align="center">K</p><hr/>
<div>
<p>
<a id="kill_of_the_night_gin_wigmore" class="hvr-float-shadow" href="songs/k/Kill_Of_The_Night_Gin_Wigmore.html">Kill Of The Night - Gin Wigmore</a>
<a href="songs/k/.html"> </a>
<a href="songs/k/.html"> </a>
</p>
</div>
<hr id="l_songs"/><hr/><p align="center">L</p><hr/>
<div>
<p>
<a id="latch_disclosure" class="hvr-float-shadow" href="songs/l/Latch_Disclosure.html">Latch - Disclosure</a>
<a href="songs/l/.html"> </a>
<a href="songs/l/.html"> </a>
</p>
</div>
<hr id="m_songs"/><hr/><p align="center">M</p><hr/>
<div>
<p>
<a id="me_and_my_broken_heart_rixton" class="hvr-float-shadow" href="songs/m/Me_And_My_Broken_Heart_Rixton.html">Me And My Broken Heart - Rixton</a>
<a href="songs/m/.html"> </a>
<a href="songs/m/.html"> </a>
</p>
</div>
<hr id="n_songs"/><hr/><p align="center">N</p><hr/>
<div>
<p>
<a id="the_nights_avicci" class="hvr-float-shadow" href="songs/n/The_Nights_Avicci.html">The Nights - Avicci</a>
<a href="songs/n/.html"> </a>
<a href="songs/n/.html"> </a>
</p>
</div>
<hr id="o_songs"/><hr/><p align="center">O</p><hr/>
<div>
<p>
<a id="on_my_mind_ellie_goulding" class="hvr-float-shadow" href="songs/o/On_My_Mind_Ellie_Goulding.html">On My Mind - Ellie Goulding</a>
<a href="songs/o/.html"> </a>
<a href="songs/o/.html"> </a>
</p>
</div>
<hr id="p_songs"/><hr/><p align="center">P</p><hr/>
<div>
<p>
<a id="paradise_coldplay" class="hvr-float-shadow" href="songs/p/Paradise_Coldplay.html">Paradise - Coldplay</a>
<a href="songs/p/.html"> </a>
<a href="songs/p/.html"> </a>
</p>
</div>
<hr id="q_songs"/><hr/><p align="center">Q</p><hr/>
<div>
<p>
<a href="songs/q/.html"> </a>
<a href="songs/q/.html"> </a>
<a href="songs/q/.html"> </a>
</p>
</div>
<hr id="r_songs"/><hr/><p align="center">R</p><hr/>
<div>
<p>
<a id="rather_be_clean_bandit" class="hvr-float-shadow" href="songs/r/Rather_Be_Clean_Bandit.html">Rather Be - Clean Bandit</a>
<a href="songs/r/.html"> </a>
<a href="songs/r/.html"> </a>
</p>
</div>
<hr id="s_songs"/><hr/><p align="center">S</p><hr/>
<div>
<p>
<a id="secrets_coldplay" class="hvr-float-shadow" href="songs/s/Secrets_Coldplay.html">Secrets - Coldplay</a>
<a href="songs/s/.html"> </a>
<a href="songs/s/.html"> </a>
</p>
</div>
<hr id="t_songs"/><hr/><p align="center">T</p><hr/>
<div>
<p>
<a id="this_is_how_we_do_katy_perry" class="hvr-float-shadow" href="songs/t/This_Is_How_We_Do_Katy_Perry.html">This Is How We Do - Katy Perry</a>
<a href="songs/t/.html"> </a>
<a href="songs/t/.html"> </a>
</p>
</div>
<hr id="u_songs"/><hr/><p align="center">U</p><hr/>
<div>
<p>
<a id="uma_thurman_fall_out_boy" class="hvr-float-shadow" href="songs/u/Uma_Thurman_Fall_Out_Boy.html">Uma Thurman - Fall Out Boy</a>
<a href="songs/u/.html"> </a>
<a href="songs/u/.html"> </a>
</p>
</div>
<hr id="v_songs"/><hr/><p align="center">V</p><hr/>
<div>
<p>
<a id="victorious_panic_at_the_disco" class="hvr-float-shadow" href="songs/v/Victorious_Panic_At_The_Disco.html">Victorious - Panic! At The Disco</a>
<a href="songs/v/.html"> </a>
<a href="songs/v/.html"> </a>
</p>
</div>
<hr id="w_songs"/><hr/><p align="center">W</p><hr/>
<div>
<p>
<a id="want_to_want_me_jason_derulo" class="hvr-float-shadow" href="songs/w/Want_To_Want_Me_Jason_Derulo.html">Want To Want Me - Jason Derulo</a>
<a href="songs/w/.html"> </a>
<a href="songs/w/.html"> </a>
</p>
</div>
<hr id="x_songs"/><hr/><p align="center">X</p><hr/>
<div>
<p>
<a id="xo_the_eden_project" class="hvr-float-shadow" href="songs/x/XO_The_Eden_Project.html">XO - The Eden Project</a>
<a href="songs/x/.html"> </a>
<a href="songs/x/.html"> </a>
</p>
</div>
<hr id="y_songs"/><hr/><p align="center">Y</p><hr/>
<div>
<p>
<a id="you_know_you_like_it_dj_snake" class="hvr-float-shadow" href="songs/y/You_Know_You_Like_It_DJ_Snake.html">You Know You Like It - DJ Snake</a>
<a href="songs/y/.html"> </a>
<a href="songs/y/.html"> </a>
</p>
</div>
<hr id="z_songs"/><hr/><p align="center">Z</p><hr/>
<div>
<p>
<a href="songs/z/.html"> </a>
<a href="songs/z/.html"> </a>
<a href="songs/z/.html"> </a>
</p>
</div>
</div>
</body>
これは私が探していたものでした。ありがとうございました！ – JusThatGuy