* {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.

Что мне сейчас нужно, так это способ, чтобы они переходили вверху моей страницы каждый раз, когда я нажимаю новый, чтобы мне не приходилось каждый раз прокручивать вверх.

Жду ответов

0
Emil Skovmand 19 Сен 2018 в 12:23

2 ответа

Лучший ответ
* {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
user9941177user9941177 19 Сен 2018 в 09:39
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;
   }
0
Vishnuraj 19 Сен 2018 в 09:33