Open In App

Blaze UI Back to top

Improve
Improve
Like Article
Like
Save
Share
Report

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/



Last Updated : 26 Apr, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads