Merge pull request #269 from Pro-18/scroll_add

Adding scroll button
Prajwal0225 · Oct 24, 2023 · c497837 · c497837
2 parents 752b7db + cb5a616
commit c497837
Show file tree

Hide file tree

Showing 3 changed files with 116 additions and 3 deletions.
diff --git a/about.html b/about.html
@@ -91,7 +91,9 @@
        With just a click, you’ll be amazed by exhilarating images of heroes<br/> 
        waiting to be discovered!</div>  
   </div>
-
+  <section id="section08" class="demo">
+    <a href="#section09"><span></span>Scroll</a>
+  </section>
 <div class="heading">
   <p>Curious Cases</p>
 </div>
@@ -127,8 +129,9 @@ <h2>Is it free to use?</h2><br>
   </div>
 
 
-
-
+  <section id="section09" class="demo">
+
+  </section>
 
     <!--hacktoberfest part idea-->
     <div class="head">

diff --git a/abt.css b/abt.css
@@ -259,3 +259,107 @@ nav.stroke ul li a:hover:after {
     margin-top: 1rem;
   }
 }
+
+section {
+  position: relative;
+  width: 100%;
+  height: 5%;
+}
+section::after {
+  position: absolute;
+  bottom: 0;
+  left: 90%;
+  content: '';
+  width: 100%;
+  height: 80%;
+  background: -webkit-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,.8) 80%,rgba(0,0,0,.8) 100%);
+  background: linear-gradient(to bottom,rgba(0,0,0,0) 0,rgba(0,0,0,.8) 80%,rgba(0,0,0,.8) 100%);
+}
+.demo a {
+  position: absolute;
+  bottom: 20px;
+  left: 90%;
+  z-index: 2;
+  display: inline-block;
+  -webkit-transform: translate(0, -50%);
+  transform: translate(0, -50%);
+  color: #fff;
+  font : normal 400 20px/1 'Josefin Sans', sans-serif;
+  letter-spacing: .1em;
+  text-decoration: none;
+  transition: opacity .3s;
+}
+.demo a:hover {
+  opacity: .5;
+}
+#section08 a {
+  padding-top: 60px;
+}
+#section08 a span {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  width: 30px;
+  height: 50px;
+  margin-left: -15px;
+  border: 2px solid #fff;
+  border-radius: 50px;
+  box-sizing: border-box;
+}
+#section08 a span::before {
+  position: absolute;
+  top: 10px;
+  left: 50%;
+  content: '';
+  width: 6px;
+  height: 6px;
+  margin-left: -3px;
+  background-color: #fff;
+  border-radius: 100%;
+  box-sizing: border-box;
+}
+
+
+
+#section09 a {
+  padding-top: 80px;
+}
+#section09 a span {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  width: 30px;
+  height: 50px;
+  margin-left: -15px;
+  border: 2px solid #fff;
+  border-radius: 50px;
+  box-sizing: border-box;
+}
+#section09 a span::before {
+  position: absolute;
+  top: 10px;
+  left: 50%;
+  content: '';
+  width: 6px;
+  height: 6px;
+  margin-left: -3px;
+  background-color: #fff;
+  border-radius: 100%;
+  box-sizing: border-box;
+}
+#section09 a span::after {
+  position: absolute;
+  bottom: -18px;
+  left: 50%;
+  width: 18px;
+  height: 18px;
+  content: '';
+  margin-left: -9px;
+  border-left: 1px solid #fff;
+  border-bottom: 1px solid #fff;
+  -webkit-transform: rotate(-45deg);
+  transform: rotate(-45deg);
+  box-sizing: border-box;
+}
+
+
diff --git a/script.js b/script.js
@@ -166,3 +166,9 @@ searchInput.addEventListener("keyup", (e) => {
     });
   }); // end DOM ready
 })(jQuery); // end jQuery
+$(function() {
+  $('a[href*=#]').on('click', function(e) {
+    e.preventDefault();
+    $('html, body').animate({ scrollTop: $($(this).attr('href')).offset().top}, 500, 'linear');
+  });
+});