发表新帖
发表新帖

How to make a back-to-top button using CSS and HTML only?

前端 未结
关注
12 1589
别那么骄傲
别那么骄傲 2020-12-28 16:11

What i\'m trying to do is kind of like a back to top button but to scroll down and up to a certain point on the page! Say for instance you have a long text and

相关标签:
12条回答
  • 不知归路
    2020-12-28 16:20

    If you want a simple "Top" button that floats as you scroll down the page you can do this:

    HTML:

    <button id="myBtn"><a href="#top" style="color: white">Top</a></button>

    CSS:

    /*Floating Back-To-Top Button*/
    #myBtn {
        position: fixed;
        bottom: 10px;
        float: right;
        right: 18.5%;
        left: 77.25%;
        max-width: 30px;
        width: 100%;
        font-size: 12px;
        border-color: rgba(85, 85, 85, 0.2);
        background-color: rgb(100,100,100);
        padding: .5px;
        border-radius: 4px;

    }
/*On Hover Color Change*/
    #myBtn:hover {
        background-color: #7dbbf1;
    }
 
    <html>
<head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width,initial-scale=1.0">
      <title> Simple Back To Top Floating Button </title>
</head>
<body style="background-color: rgba(84,160,245,0.51)">
<div style="padding:15px 15px 2500px;font-size:30px">
  <p><b>Scroll down and click the button</b></p>
  <p>Scroll down this frame to see the effect!</p>
  <p>Scroll Baby SCROLL!!</p>
  <p>Lorem ipsum dolor dummy text sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>


<button id="myBtn"><a href="#top" style="color: white">Top</a></button>

</body>
</html>

    0 讨论(0)
  • 独厮守ぢ
    2020-12-28 16:22

    What you would want to do is put an "anchor" at the top of the page, using an <a> tag (it's not JUST useful for links!). Then, when you have a link that goes to #nameofanchor, it scrolls to the anchor with that name. You'd do it like this:

    <a id="top"></a>
<!--content here-->
<a href="#top">Back to top</a>

    Here is a working jsfiddle: http://jsfiddle.net/qf0m9arp/1/

    0 讨论(0)
  • 予麋鹿
    2020-12-28 16:25

    HTML

    <a name="gettop"></a>

<button id="btn"><a href="#gettop">Back to Top</a></button>

    CSS

    #btn {  
    position: fixed;
    bottom: 10px;
    float: right;
    right: 20.5%;
    left: 77.25%;
    max-width: 90px;
    width: 100%;
    font-size: 12px;
    border-color: rgba(5, 82, 248);
    background-color: rgb(5, 82, 248);
    padding: .5px;
    border-radius: 4px;
    font-family: Georgia, 'Times New Roman', Times, serif;
}

    On Hover Color Change

    #btn:hover {
    background-color: #fafafa;
}
    0 讨论(0)
  • 后悔当初
    2020-12-28 16:27

    To add to the existing answers, you can avoid affecting the URL by overriding the link with JavaScript. This will still take you to the top of the page without JavaScript, but will append # to the URL.

    <a href="#" onclick="document.body.scrollTop=0;document.documentElement.scrollTop=0;event.preventDefault()">Back to top</a>
    0 讨论(0)
  • 再見小時候
    2020-12-28 16:28

    I used a form with a single submit button. Point the "action" attribute to the ID of the element that needs to be navigated to. Worked for me with just "#top" without needing to define an ID in my stylesheet:

    <form action="#top">
    <button type="submit">Back to Top</button>
</form>

    Maybe a couple extra lines than is desirable but it's a button, at least. I find this the most concise and descriptive way to go about it.

    0 讨论(0)
  • 别那么骄傲
    2020-12-28 16:38

    This is the HTML only way:

    <body>
<a name="top"></a>
foo content
foo bottom of page
<a href="#top">Back to Top</a>
</body>

    There are quite a few other alternatives using jquery and jscript though which offer additional effects. It really just depends on what you are looking for.

    0 讨论(0)
 看不清?
提交回复
热议问题