2407
Floating Back to Top Button with jQuery
تعریف دکمه ای که بتوان با کلیک بر روی آن به بالای صفحه بازگشت
اضافه کردن این کد در پایین صفحه ای که نیاز داریم تا این دکمه نمایش داده شود
@section scripts{
<script type="text/javascript">
$('body').prepend('<a href="#" class="back-to-top">Back to Top</a>');
var amountScrolled = 200;
$(window).scroll(function () {
if ($(window).scrollTop() > amountScrolled) {
$('a.back-to-top').fadeIn('slow');
} else {
$('a.back-to-top').fadeOut('slow');
}
});
</script>
}
و همچنین این کد style در بالای صفحه
<style>
a.back-to-top {
display: none;
width: 60px;
height: 60px;
text-indent: -9999px;
position: fixed;
z-index: 999;
right: 20px;
bottom: 20px;
background: #27AE61 url("~/Image/arrow-up.png") no-repeat center 43%;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
}
</style>