Scroll to Top

Size
6,082 Kb
Views
10,120

How do I make an scroll to top?

What is a scroll to top? How do you make a scroll to top? This script and codes were developed by Mohammed Fawzy on 26 January 2023, Thursday.

Scroll to Top Previews

Scroll to Top - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Scroll to Top</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!DOCTYPE html>
<html lang="en">
<head>	<meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content=""> <meta name="author" content="">	<title>وصلة - المنصة العربية لادارة وتطوير الاعمال</title>	<meta name="robots" content="noindex"> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">	<!-- css -->	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">	<link rel="stylesheet" href="assets/css/bootstrap-rtl.min.css">	<link rel="stylesheet" href="assets/css/style.css">	<!-- slider -->	<script type="text/javascript" src="assets/js/modernizr.custom.79639.js"></script>	<link rel="stylesheet" type="text/css" href="assets/css/component.css" />	<!-- FONTS -->	<link rel="stylesheet" href="assets/fonts/jfflat.css" type="text/css" charset="utf-8" />	<!-- FONTS awesome -->	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> <![endif]--> <style>
/* Add animation (Chrome, Safari, Opera) */
@-webkit-keyframes example { from {top:-100px;opacity: 0;} to {top:0px;opacity:1;}
}
/* Add animation (Standard syntax) */
@keyframes example { from {top:-100px;opacity: 0;} to {top:0px;opacity:1;}
}
/* The modal's background */
.modal { display: none; position: fixed; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgb(0, 0, 0); background-color: rgba(0, 0, 0, 0.6); z-index: 99999;
}
/* Display the modal when targeted */
.modal:target { display: table; position: absolute;
}
/* The modal box */
.modal-dialog { display: table-cell; vertical-align: middle;
}
/* The modal's content */
.modal-dialog .modal-content { margin: auto; background-color: #f3f3f3; position: relative; padding: 0; outline: 0; border: 1px #777 solid; text-align: justify; width: 80%; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); /* Add animation */ -webkit-animation-name: example; /* Chrome, Safari, Opera */ -webkit-animation-duration: 0.5s; /* Chrome, Safari, Opera */ animation-name: example; animation-duration: 0.5s; height: 235px;
}
/* The button used to close the modal */
.closebtn { text-decoration: none; float: right; font-size: 35px; font-weight: bold; color: #fff;
}
.closebtn:hover,
.closebtn:focus { color: #000; text-decoration: none; cursor: pointer;
}
.containerr { padding: 2px 16px;
}
.h__header { background-color: #0063c7; font-size: 23px; color: white; height: 79px; padding: 20px; margin-bottom: 13px;
}
.h__header a {	width: 20px !important;	position: absolute; top: 0; right: 8px;
}
.h__header a:hover {	color:#051321 ;
}
.h__header h2{	font-size: 17px !important;	margin: 11px !important;
}
.h__footer { background-color: #0063c7; font-size: 20px; color: white;
}
</style>
</head>
<body>
<header class="header__div">	<hr>	<div class="container">	<div class="row">	<div class="col-sm-12 col-md-10 col-md-offset-1">	<div class="header__top">	<div class="col-sm-offset-4 col-sm-4 col-xs-12 visible-xs">	<div class="logo ">	<a href=""><img src="assets/images/logo.png" alt="logo" class="img-responsive"></a>	</div>	<!-- end logo -->	</div>	<!-- end column -->	<nav id='cssmenu' class="cl-effect-12">	<div id="head-mobile">	</div>	<div class="button"></div>	<ul>	<li class="active"><a href='/'>الرئيسية</a></li>	<li><a href='#howIt__help'>لماذا وصلة</a></li>	<li><a href='#deviseUse'>انظمة التشغيل</a></li>	<li><a href='#footer'>التسجيل</a></li>	</ul>	</nav>	<!-- end nav -->	<div class="col-sm-offset-3 col-sm-5 col-xs-12 hidden-xs">	<div class="logo ">	<a href=""><img src="assets/images/logo.png" alt="logo" class="img-responsive center-block"></a>	</div>	<!-- end logo -->	</div>	<!-- end column -->	</div>	<!-- end header top -->	</div>	<!-- end column -->	</div>	<!-- end row -->	</div>	<!-- end container -->	<div class="container">	<div class="row">	<div class="header__bottom__items">	<div class="col-md-12">	<div class="col-sm-8">	<header id="about-waslla">	<h2>قم بإدارة جميع أعمالك من مكان واحد</h2>	<p>وصلة أول نظام عربى يساعد اصحاب الأعمال على إدارة جميع مهام العمل من مكان واحد</p>	</header><!-- /header -->	<div class="col-md-6">	<div class="header__bottom__item">	<img src="assets/images/icon26.png" alt="" class="hvr-pop">	<h2>إدارة المشاريع وتوزيع المهام</h2>	</div>	<div class="header__bottom__item">	<img src="assets/images/icon15.png" alt="">	<h2>إدارة فرق العمل</h2>	</div>	</div>	<div class="col-md-6">	<div class="header__bottom__item">	<img src="assets/images/icon.png" alt="">	<h2>إدارة الحسابات والماليات</h2>	</div>	<div class="header__bottom__item">	<img src="assets/images/icon-.png" alt="">	<h2>إدارة الموارد البشرية</h2>	</div>	</div>	</div>	<!-- end column -->	<div class="col-sm-4">	<h2 class="header__topForm__h2">سجل الآن لتحصل علي اشتراك مجاني</h2>	<div class="bootstrap-iso" id="form__reg"> <div class="container-fluid"> <div class="row"> <div class="col-md-12 col-sm-12 col-xs-12"> <div class="formden_header"> <h2> </h2> <p> </p> </div> <form action="http://snl.wasllah.com/subscribe" method="POST" accept-charset="utf-8"> <div class="form-group "> <input class="form-control" name="name" value="" placeholder="الاسم " type="text" id="name" required /> </div> <div class="form-group "> <input class="form-control" id="email" value="" name="email" placeholder="البريد الالكتروني " type="email"/ required> </div> <div class="form-group"> <div class="header__topForm__butoon"> <input type="hidden" name="list" value="hpJo2Hq9c92uFbrC763892hjCQ"/> <button class="btn btn-primary hvr-shutter-out-vertical" name="submit" type="submit"> تسجيل </button> </div> </div> </form> </div> </div> </div>	</div>	</div>	<!-- end column -->	</div>	<!-- end column 12 -->	</div>	<!-- end header__bottom__items -->	</div>	<!-- end row -->	</div>	<!-- end container -->
</header>
<section class="counter__div">	<div class="container">	<div class="row"><br />
<p style="text-align:center; font-size:20px; line-height:1.9;">نظام وصلة لادارة الاعمال يعتبر الاول عربيا في مجالة، فيقوم بتوفير الادوات المتاحة في اكبر الانظمة العالمية ولكن باللغة العربية مع مراعاة بعض الاضافات التي تلزم اصحاب الاعمال العرب.</p>	</div>	<!-- end row -->	</div>	<!-- end container -->
</section>
<section class="howIt__help" id="howIt__help">	<div class="container">	<div class="row">	<header>	<h2 class="text-center">كيف ستساعدك وصلة على تسهيل اعمالك؟</h2>	<p class="text-center">تساعدك وصلة على توفير الوقت الكثير واتمام العديد من الاعمال بضغطات بسيطة ومن مكان واحد</p>	</header>	<div class="howIt__help__content">	<div class="col-md-7">	<div class="howIt__help__content__right">	<dl> <dt><img src="assets/images/Vector-Smart-Object2.png" alt=""> إتمام اعمالك من المتصفح الكمبيوتر او الموبايل</dt> <dd>كنت في المكتب او في المنزل او حتي في الطريق يمكنك الاطلاع على سير العمل واخر التطورات وعمل اضافة او تعديل لاي شئ تريد.</dd> <dt><img src="assets/images/Vector-Smart-Object1.png" alt=""> حساب واحد لادارة جميع أعمالك</dt> <dd>تمكنك وصلة من ادارة كل شء من مكان واحد (المشاريع والمهام - فرق العمل - الحسابات والموارد البشرية).</dd> <dt><img src="assets/images/Vector-Smart-Object.png" alt=""> التواصل مع فرق العمل</dt> <dd>تواصل مع فرق العمل عن طريق شات مباشر عن طريق المتصفح او عن طريق الهاتف.</dd>	</dl>	</div>	</div>	<div class="col-md-5">	<div class="howIt__help__content__left hover02 column">	<img src="assets/images/Untitled-1s.png" alt="wassla" class="img-responsive">	</div>	</div>	<!-- end content -->	</div>	<!-- end row -->	</div>	<!-- end container -->
</section>
<section class="deviseUse__items" id="deviseUse">	<div class="container">	<div class="row">	<div class=" col-md-offset-1 col-md-10">	<div class="col-sm-4">	<div class="deviseUse__item">	<div class="icon center-block">	<img src="assets/images/Vector-Smart-Object3.png" alt="" class="center-block">	</div>	<h2 class="text-center">انظمة الموبايل</h2>	<ul class="text-center" class="text-center">	<li> ANDROID </li>	<li> IOS</li>	</ul>	</div>	<!-- end column -->	</div>	<!-- end deviseUse__item -->	<div class="col-sm-4">	<div class="deviseUse__item">	<div class="icon center-block"><img src="assets/images/Vector-Smart-Object-copy-2.png" alt="" class="center-block"></div>	<h2 class="text-center">اجهزة المكتب</h2>	<ul class="text-center">	<li> Windows</li>	<li> Mac</li>	<li> linux</li>	</ul>	</div>	<!-- end column -->	</div>	<!-- end deviseUse__item -->	<div class="col-sm-4">	<div class="deviseUse__item">	<div class="icon center-block"><img src="assets/images/Vector-Smart-Object-copy-1.png" alt="" class="center-block"></div>	<h2 class="text-center">متصفحات الانترنت</h2>	<ul class="text-center">	<li> Chrome</li>	<li> Internet Explorer </li>	<li> Firefox</li>	<li> Safari</li>	</ul>	</div>	<!-- end column -->	</div> <!-- end deviseUse__item -->	</div>	<!-- end column -->	</div>	<!-- end row -->	</div>	<!-- end container -->
</section>
<footer class="footer" id="footer">	<div class="top__footer">	<div class="container">	<div class="row">	<div class="col-md-offset-3	col-md-6">	<form>	<h2 class="text-center">لفترة محدودة - سجل الان واحصل على اشتراك مجاني لمدة 3 اشهر!</h2>	<a href="#id01" class="btn center-block hvr-shutter-in-vertical">سجل الآن </a>	</form>	</div>	<!-- end column -->	</div>	<!-- end row -->	</div>	<!-- end container -->	</div>	<!-- end top footer -->
<!-- // model -->
<div class="container">	<div class="row">	<!-- <div class="col-md-6 col-md-offset-3"> -->	<div id="id01" class="modal"> <div class="modal-dialog"> <div class="modal-content"> <header class="containerr h__header "> <a href="#" class="closebtn">×</a> <h2 class="text-center">سجل الآن لتحصل علي اشتراك مجاني عند الانطلاق</h2> </header> <form action="http://snl.wasllah.com/subscribe" method="POST" accept-charset="utf-8"> <div class="form-group col-md-6 col-md-offset-3"> <input class="form-control text-center" name="name" value="" placeholder="الاسم " type="text" required/> </div> <div class="form-group col-md-6 col-md-offset-3"> <input class="form-control text-center" value="" name="email" placeholder="البريد الالكتروني " type="email" required /> </div> <div class="form-group col-md-6 col-md-offset-3"> <div class="header__topForm__butoon text-center"> <input type="hidden" name="list" value="hpJo2Hq9c92uFbrC763892hjCQ"/> <button class="btn btn-primary hvr-shutter-out-vertical" name="submit" type="submit"> سجل الأن </button> </div> </div> </form> </div> </div>	<!-- end modal-dialog-->	</div>	<!-- end id01 -->	<!-- </div> -->	<!-- end column -->	</div>	<!-- end row -->
</div>	<!-- end container -->	<div class="bottom__footer">	<div class="container">	<div class="row">	<div class="col-xs-12 col-sm-5 col-sm-offset-2 col-md-5 col-md-offset-2">	<ul class="bottom__footer__icon">	<li><a href="https://www.facebook.com/wasllahcom" target="_blank" class="social-slide facebook-hover" aria-hidden="true"></a></li>	<li><a href="https://twitter.com/wasllahcom" target="_blank" class="social-slide twitter-hover" aria-hidden="true"></a></li>	<!-- <a href=""><i class="social-slide linkedin-hover" aria-hidden="true"></i></a> -->	<!-- <a href=""><i class="social-slide google-hover" aria-hidden="true"></i></a> -->	</ul>	</div>	<!-- end column -->	</div>	<!-- end row -->	</div>	<!-- end container -->	</div>	<!-- end bottom footer -->
<a href="javascript:" id="return-to-top"><i class="fa fa-arrow-circle-up"></i></a>
</footer>
<!-- jQuery -->	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Scroll to Top - Script Codes CSS Codes


//css
#return-to-top { position: fixed; bottom: 20px; right: 20px; width: 50px; height: 50px; display: block; text-decoration: none; -webkit-border-radius: 35px; -moz-border-radius: 35px; border-radius: 35px; display: none; -webkit-transition: all 0.3s linear; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; }
#return-to-top i { color: #1975D1; margin: 0; position: relative; left: 16px; top: 13px; font-size: 25px; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; }
#return-to-top:hover i { top: 5px; } 

Scroll to Top - Script Codes JS Codes

// ===== Scroll to Top ====
$(window).scroll(function() { if ($(this).scrollTop() >= 50) { // If page is scrolled more than 50px $('#return-to-top').fadeIn(200); // Fade in the arrow } else { $('#return-to-top').fadeOut(200); // Else fade out the arrow }
});
$('#return-to-top').click(function() { // When arrow is clicked $('body,html').animate({ scrollTop : 0 // Scroll to top of body }, 500);
});
Scroll to Top - Script Codes
Scroll to Top - Script Codes
Home Page Home
Developer Mohammed Fawzy
Username mohammed-fawzy
Uploaded January 26, 2023
Rating 3
Size 6,082 Kb
Views 10,120
Do you need developer help for Scroll to Top?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Mohammed Fawzy (mohammed-fawzy) Script Codes
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!