تعریف دکمه بازگشت رو به بالا با استفاده از jQury

4/18/2016 MVC
836

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>