اسکرول به اول صفحه توسط Jquery

اسکرول به اول صفحه توسط Jquery در برخی از سایت ها دیدید که وقتی صفحه اسکرول میشه به سمت پایین یک فلش ظاهر میشه که با کلیک روی آن به صورت انیمیشنی صفحه به بالا هدایت میشه در این نمونه نحوه انجام اینکار را یاد خواهید گرفت

سلام دوستان

در برخی از سایت ها دیدید که وقتی صفحه اسکرول میشه به سمت پایین یک فلش ظاهر میشه که با کلیک روی آن به صورت انیمیشنی صفحه به بالا هدایت میشه

در این نمونه نحوه انجام اینکار را یاد خواهید گرفت

در نمونه کامل و واصح کد ها مشخص است و زمان یا سرعت اسکرول رو در قطعه کد زیر میتونید تغییر بدید

$('#scrollToTop').bind("click", function () { $('html, body').animate({ scrollTop: 0 }, 1200); return false; });

سوس صفحه هم کد ها زیر میباشد

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Example_JqueryScrollTop.Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>برنامه نویسان</title> <style type="text/css"> body { font-family: Arial; font-size: 10pt; } #scrollToTop { cursor:pointer; background-color:#0090CB; display:inline-block; height:40px; width:40px; color:#fff; font-size:16pt; text-align:center; text-decoration:none; line-height:40px; } </style> <mce:script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" mce_src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></mce:script> <mce:script type = "text/javascript"></mce:script> </head> <body> <form id="form1" runat="server"> متن تست - برنامه نویسان متن تست - برنامه نویسان متن تست - برنامه نویسان متن تست - برنامه نویسان متن تست - برنامه نویسان متن تست - برنامه نویسان متن تست - برنامه نویسان متن تست - برنامه نویسان متن تست - برنامه نویسان متن تست - برنامه نویسان متن تست - برنامه نویسان متن تست - برنامه نویسان متن تست - برنامه نویسان متن تست - برنامه نویسان متن تست - برنامه نویسان متن تست - برنامه نویسان متن تست - برنامه نویسان متن تست - برنامه نویسان متن تست - برنامه نویسان متن تست - برنامه نویسان متن تست - برنامه نویسان متن تست - برنامه نویسان متن تست - برنامه نویسان متن تست - برنامه نویسان متن تست - برنامه نویسان متن تست - برنامه نویسان متن تست - برنامه نویسان متن تست - برنامه نویسان متن تست - برنامه نویسان متن تست - برنامه نویسان متن تست - برنامه نویسان متن تست - برنامه نویسان متن تست - برنامه نویسان متن تست - برنامه نویسان متن تست - برنامه نویسان متن تست - برنامه نویسان متن تست - برنامه نویسان متن تست - برنامه نویسان متن تست - برنامه نویسان متن تست - برنامه نویسان متن تست - برنامه نویسان متن تست - برنامه نویسان متن تست - برنامه نویسان متن تست - برنامه نویسان متن تست - برنامه نویسان متن تست - برنامه نویسان متن تست - برنامه نویسان متن تست - برنامه نویسان متن تست - برنامه نویسان متن تست - برنامه نویسان متن تست - برنامه نویسان متن تست - برنامه نویسان متن تست - برنامه نویسان متن تست - برنامه نویسان متن تست - برنامه نویسان متن تست - برنامه نویسان <div align = "right"> <a href="javascript:;" mce_href="javascript:;" id="scrollToTop">▲</a> </div> </form> </body> </html>

نمونه هم ضمیمه کردم

موفق و پیروز باشید

فایل های ضمیمه

Example_JqueryScrollTop.rar

مرجع تخصصی برنامه نویسان

انجمن تخصصی برنامه نویسان فارسی زبان

دوره های در حال ثبت نام آکادمی برنامه نویسان

اسکرول به اول صفحه توسط Jquery

فایل های ضمیمه

ایمان مدائنی

اگر نیاز به یک مشاور در زمینه طراحی سایت ، برنامه نویسی و بازاریابی الکترونیکی دارید