单击链接和自动滚动

时间:2016-05-24 23:04:29

标签: javascript html

我的网站左侧有一个导航栏,完全填充了与锚标签关联的“a”标签。

在使用我的网站时,您将转到不同页面,这些页面没有您需要的主要歌曲列表,如主页所示。
我想要发生的是在这些子页面上,单击“a”标签将您带到主页,然后,无需再次按任何内容,自动滚动到相应的锚标签。

例如,您可以点击“All Of Me - John Legend”,它会带您到该页面的信息 然后(在“All of Me”页面上仍然是STILL)你会点击导航栏中的“G”,然后它会转到主页并向下滚动到“G Songs”部分。

这是我的代码,谢谢你的帮助!

    <!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>

2 个答案:

答案 0 :(得分:0)

在歌曲的信息部分,即(All Of Me - John Legend)。使用id创建一个元素,然后将此ID添加到您的链接中,例如:

<a id="all_of_me_john_legend" class="hvr-float-shadow" href="songs/a/All_Of_Me_John_Legend.html#info">All Of Me - John Legend</a>

请注意href

href="songs/a/All_Of_Me_John_Legend.html#info"

这将转到歌曲页面和info部分。

答案 1 :(得分:0)

在您的信息页面上,您的链接需要包含主页网址和您要跳转的部分,例如:

     <li><a class="hvr-wobble-horizontal" href="homepage/#z_songs">Z</a></li>
     <li><a class="hvr-wobble-horizontal" href="homepage/#a_songs">A</a></li>
     <li><a class="hvr-wobble-horizontal" href="homepage/#b_songs">B</a></li>

您可以在http://plnkr.co/edit/iwFCnryOKJS9zMGRmbeI?p=preview

尝试

只有“All Of Me - John Legend”才会进入信息页面。