Skip to content
Related Articles

Related Articles

Blaze UI Back to top

View Discussion
Improve Article
Save Article
  • Last Updated : 26 Apr, 2022
View Discussion
Improve Article
Save Article

Blaze UI is a framework-free open source UI toolkit that uses JavaScript components to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing. This framework allows us to use various of its styles and properties to make a website more user-friendly.

Blaze UI provides the Back to Top feature, when the user clicks on the back to top button then it will scroll up the page to the top. 

There is one attribute offered by Blaze UI Back to top:

  • position: This attribute specifies the position of the button to the ‘left’ or ‘center‘. The default position is ‘right’.

We can add a Back to top feature using the blaze-back-to-top tag provided by Blaze UI.

Syntax:

<blaze-back-to-top position="...">
    <button class="...">Back to Top</button>
</blaze-back-to-top>

Example 1: The following code demonstrates the Blaze UI Back to the top with the position ‘Left’ feature using the Blaze UI.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <script type="module" src=
    </script>
      
    <script nomodule="" src=
    </script>
      
    <link rel="stylesheet" href=
</head>
<body>
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>
      
    <h3>Blaze UI Back to Top </h3>
    <h4>Scroll down</h4>
       
    <p><img style="width:200px" src=
    </p>
   
    <p><img style="width:200px" src=
    </p
       
    <p><img style="width:200px" src=
    </p>
   
    <p><img style="width:200px" src=
    </p>
   
    <p><img style="width:200px" src=
    </p>
   
    <blaze-back-to-top position="left">
        <button class="c-button">
            Go back to top
        </button>
    </blaze-back-to-top>
</body>
</html>


Output:

 

Example 2: The following code demonstrates the Blaze UI Back to the top with the position ‘Right’ feature using the Blaze UI.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <script type="module" src=
    </script>
    <script nomodule="" src=
    </script>
    <link rel="stylesheet" href=
</head>
  
<body>
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>
      
    <h3>Blaze UI Back to Top </h3>
    <h4>Scroll down</h4>
  
    <p><img style="width:200px" src=
    </p>
  
  
    <p><img style="width:200px" src=
    </p>
  
  
    <p><img style="width:200px" src=
    </p>
  
  
    <p><img style="width:200px" src=
    </p>
  
  
    <p><img style="width:200px" src=
    </p>
  
    <blaze-back-to-top position="right">
        <button class="c-button">Go back to top</button>
    </blaze-back-to-top>
</body>
  
</html>


Output:

 

Reference: https://www.blazeui.com/components/back-to-top/


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!