我想让我的按钮在点击时转到页面顶部

时间：2018-09-19 09:23:41

标签： javascript html css 

* {box-sizing: border-box}

body, html, head {
    height: 100%;
    margin: 0;
    font-family: Arial;
}

.tablink {
    background-color: #555;
    color: white;
    float: left;
    border: black;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    font-size: 25px;
    width: 20%;
    
}



.tablink:hover {
    background-color: #1a1a1a;
}

.tabcontent {
    color: white;
    display: none;
    padding: 100px 20px;
    height: 150%;
}

div.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

#Opgaver {background-color: red;}
#Setup {background-color: green;}
#Tests {background-color: blue;}
#Kilder {background-color: orange;}
#Om_mig {background-color:pink;}
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1" charset="utf-8">
    <title>Min Side</title>
      <link rel="stylesheet" type="text/css" href="Hjemmeside.css">
      <link rel="icon" href="https://www.spreadshirt.com/image-server/v1/mp/designs/13174048,width=178,height=178/middle-finger-bitmap-deluxe-fuck-you-fock-you.png">

  </head>
  <body>
<div class="sticky">
    <button class="tablink" onclick="openPage('Opgaver', this, 'red')"id="defaultOpen">Opgaver</button>
    <button class="tablink" onclick="openPage('Setup', this, 'green')">Setup</button>
    <button class="tablink" onclick="openPage('Tests', this, 'blue')">Test sheets</button>
    <button class="tablink" onclick="openPage('Kilder', this, 'orange')">Kilder</button>
    <button class="tablink" onclick="openPage('Om_mig', this, 'pink')">Om mig</button>
</div>
    <div id="Opgaver" class="tabcontent">
      <h3>Opgaver</h3>
<p>Skole opgaver med HTML</p>
<ul>
  <li> <a href="file:///C:/Users/Emil%20Skovmand/AppData/Local/atom/app-1.29.0/Gemte%20filer/PC%20Komponenter/PC-Komponenter.htm">Skole Hardware </a> </li>
</ul>
    </div>

    <div id="Setup" class="tabcontent">
      <h1 style="text-align:center;">Setup</h1>
<div>
  <img src="http://cdn.userbenchmark.com/resources/static/cpu/Intel-Core-i7-8700K.jpg" align:left;text-align;height:500px;width:350px; > <p>Fucking nice beskrivelse</p>

</div>
    </div>

    <div id="Tests" class="tabcontent">
      <h3>Test Sheets</h3>

    </div>

    <div id="Kilder" class="tabcontent">
      <h3>Arbejdskilder</h3>

    </div>

    <div id="Om_mig" class="tabcontent">
<h3>Om mig</h3>

    </div>

    <script>


    function openPage(pageName,elmnt,color) {
        var i, tabcontent, tablinks;
        tabcontent = document.getElementsByClassName("tabcontent");
        for (i = 0; i < tabcontent.length; i++) {
            tabcontent[i].style.display = "none";
        }
        tablinks = document.getElementsByClassName("tablink");
        for (i = 0; i < tablinks.length; i++) {
            tablinks[i].style.backgroundColor = "";
        }
        document.getElementById(pageName).style.display = "block";
        elmnt.style.backgroundColor = color;
      }

    {document.getElementById("defaultOpen").click(); }
    </script>
  </body>
  </html>

我想让我的按钮看起来像这样：   设定 转到页面顶部

页面顶部有5个按钮，用于显示其自己的div标签。

我现在需要的是让他们每次单击新页面时都可以到达页面顶部的一种方式，因此不必每次都滚动到页面顶部。

期待答案

2 个答案:

答案 0 :(得分：1)

* {box-sizing: border-box}

body, html, head {
    height: 100%;
    margin: 0;
    font-family: Arial;
}

.tablink {
    background-color: #555;
    color: white;
    float: left;
    border: black;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    font-size: 25px;
    width: 20%;
    
}



.tablink:hover {
    background-color: #1a1a1a;
}

.tabcontent {
    color: white;
    display: none;
    padding: 100px 20px;
    height: 150%;
}

div.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

#Opgaver {background-color: red;}
#Setup {background-color: green;}
#Tests {background-color: blue;}
#Kilder {background-color: orange;}
#Om_mig {background-color:pink;}
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1" charset="utf-8">
    <title>Min Side</title>
      <link rel="stylesheet" type="text/css" href="Hjemmeside.css">
      <link rel="icon" href="https://www.spreadshirt.com/image-server/v1/mp/designs/13174048,width=178,height=178/middle-finger-bitmap-deluxe-fuck-you-fock-you.png">

  </head>
  <body>
<div class="sticky">
    <button class="tablink" onclick="openPage('Opgaver', this, 'red')"id="defaultOpen">Opgaver</button>
    <button class="tablink" onclick="openPage('Setup', this, 'green')">Setup</button>
    <button class="tablink" onclick="openPage('Tests', this, 'blue')">Test sheets</button>
    <button class="tablink" onclick="openPage('Kilder', this, 'orange')">Kilder</button>
    <button class="tablink" onclick="openPage('Om_mig', this, 'pink')">Om mig</button>
</div>
    <div id="Opgaver" class="tabcontent">
      <h3>Opgaver</h3>
<p>Skole opgaver med HTML</p>
<ul>
  <li> <a href="file:///C:/Users/Emil%20Skovmand/AppData/Local/atom/app-1.29.0/Gemte%20filer/PC%20Komponenter/PC-Komponenter.htm">Skole Hardware </a> </li>
</ul>
    </div>

    <div id="Setup" class="tabcontent">
      <h1 style="text-align:center;">Setup</h1>
<div>
  <img src="http://cdn.userbenchmark.com/resources/static/cpu/Intel-Core-i7-8700K.jpg" align:left;text-align;height:500px;width:350px; > <p>Fucking nice beskrivelse</p>

</div>
    </div>

    <div id="Tests" class="tabcontent">
      <h3>Test Sheets</h3>

    </div>

    <div id="Kilder" class="tabcontent">
      <h3>Arbejdskilder</h3>

    </div>

    <div id="Om_mig" class="tabcontent">
<h3>Om mig</h3>

    </div>

    <script>


    function openPage(pageName,elmnt,color) {
        var i, tabcontent, tablinks;
        tabcontent = document.getElementsByClassName("tabcontent");
        for (i = 0; i < tabcontent.length; i++) {
            tabcontent[i].style.display = "none";
        }
        tablinks = document.getElementsByClassName("tablink");
        for (i = 0; i < tablinks.length; i++) {
            tablinks[i].style.backgroundColor = "";
        }
        document.getElementById(pageName).style.display = "block";
        elmnt.style.backgroundColor = color;
        topFunction();
      }

     <!-- **function to scroll to top** --!>
      function topFunction() {
         document.body.scrollTop = 0; // For Safari
         document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
      }

    {document.getElementById("defaultOpen").click(); }
    </script>
  </body>
  </html>

答案 1 :(得分：0)

function openPage(pageName,elmnt,color) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablink");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].style.backgroundColor = "";
    }
     document.getElementById(pageName).style.display = "block";
     pageName.scrollTop = 0; // <== Try this
     elmnt.style.backgroundColor = color;
   }
相关问题
最新问题