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

标签 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 标签。

我现在需要的是一种方法,让他们在每次我点击一个新页面时都转到我的页面顶部,这样我就不必每次都滚动到顶部。

期待答案

最佳答案

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

关于javascript - 我想让我的按钮在点击时转到我的页面顶部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52402474/

相关文章:

javascript - ionic 2 中的分组和求和 JSON 数组

javascript - Ajax 数据库更新后重新呈现 fullCalendar 中的事件

html - 哪些 HTML 元素不能有 id 或 class?

CSS 垂直对齐 : text-bottom;

html - 低于 768px 的视口(viewport)两侧的不同填充

javascript - 为什么 Lightbox 会扩展我的网页?

javascript - 单击时动画 Div 背景颜色的问题

jquery - leanModal 在没有 .click() 的情况下启动

html - 我需要一些帮助来为纹理添加渐变

html - html/body 上的高度 100% 在 iPhone 上不起作用