• 0 رای - 0 میانگین
  • 1
  • 2
  • 3
  • 4
  • 5
ساخت دکمه ی back to top
#1
سلام.
مثل این سایت میخوام یه دکمه ی back to top بزارم:
http://bavotasan.com/2011/style-select-b...-only-css/
سرچ کردم و اینو پیدا کردم . اما خیلی ساده میره بالا. به کد جی کوئریش خیلی مسلط نیستم . میشه بگید چیو تغییر بدم که افکت بهتری داشته باشه ؟
کد:
<script type="text/javascript"  src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
hide #back-top first$("#back-top").hide();
fade in #back-top$(
function () {$(window).scroll(
function () {if ($(this).scrollTop() > 1000)
{
$('#back-top').fadeIn();} else
{
$('#back-top').fadeOut();}});
  scroll body to 0px on click$('#back-top a').click(function () {$('body,html').animate({scrollTop: 0}, 800);return false;});});});
  </script>
  <style type="text/css">
  #back-top {
  position: fixed;
  bottom: 10px;
  margin-left: -150px;
  }
  #back-top a {
  width: 108px;
  display: block;
  text-align:center;
  text-decoration: none;
  color: #bbb;
   -webkit-transition: 1s;
   -moz-transition: 1s;
   transition: 1s;
   }
   #back-top a:hover
   {
   color: #000;
   }
   #back-top span
   {width: 108px;
   height: 108px;
   display: block;
   margin-bottom: 7px;
   background: #ddd url(up-arrow.png) no-repeat center center;
  -webkit-border-radius: 15px;
  -moz-border-radius:15px;
   border-radius: 15px;
  -webkit-transition: 1s;
  -moz-transition: 1s;
  transition: 1s;
  }#back-top a:hover span
  {background-color: #777;}
  #blockid
{border:solid #CC0033;
width:40px;
height:40px;
}
  </style>
</head>

<body>
<!--it is top page -->
<div id="blockid">pary is facebaby</div>

<!--it is botom page -->
<p style="display:block;" id="back-top"><a href="#blockid"><span></span>go to top</a></p>

</body>
آرام باش ؛ توكل كن ؛ تفكر كن و سپس آستينها را بالا بزن , آنگاه دستان خداوند را خواهي ديد كه زودتر از تو دست به كار شده است.امام علي عليه السلام.
  پاسخ
تشکر شده توسط :
#2
کد:
http://webdesignerwall.com/demo/scroll-to-top/scrolltotop.html

http://webdesignerwall.com/tutorials/animated-scroll-to-top
همه جوره اش رو داریم ظاهرن
  پاسخ
تشکر شده توسط : pary_daryayi
#3
http://www.webkaran.com/top_page_butt_generator.html
هر که با مرغ هوا دوست شود - خوابش آرامترین خواب جهان خواهد بود.
  پاسخ
تشکر شده توسط : pary_daryayi
#4
ممنونم . اینو امتحان کردم . مثل مال خودم سادست .
http://webdesignerwall.com/tutorials/ani...oll-to-top
آقا حمید لینکی که دادید رو دیدم . فقط نمیدونم تو body‌ چی بزارم . آخه css براش تعریف نشده.
آرام باش ؛ توكل كن ؛ تفكر كن و سپس آستينها را بالا بزن , آنگاه دستان خداوند را خواهي ديد كه زودتر از تو دست به كار شده است.امام علي عليه السلام.
  پاسخ
تشکر شده توسط :
#5
نقل قول: آقا حمید لینکی که دادید رو دیدم . فقط نمیدونم تو body‌ چی بزارم . آخه css براش تعریف نشده.
اون قسمت که میخوای اون عکس top نمایش داده بشه رو در body مشخص کن و کدی که بهت میده رو قرار بده.

اینم یکسری دیگه http://www.jquery4u.com/plugins/jquery-s...p-plugins/

ولی کاری نداره ها خودتم بخوای بنویسی اگه بتونی. کافیه فاصله از بالا رو حساب کنی با جاوا اسکریپت بعد هر مدت ثانیه که دوست داری ازش کم میکنی و جایگزین میکنی تا برسه به صفر. ولی اینکه اول سریع باشه بعد آروم بشه یک افکت زیباست که یه کار اضافه میخواد. بر اساس مقدار فاصله از بالا اگر از فلان مقدار بیشتر بود ثانیه ها کمتر بشه تا سرعتش بیشتر بشه بعد کم بشه.
غایب
  پاسخ
تشکر شده توسط : hamid_80386 pary_daryayi
#6
(۱۳۹۱ مرداد ۰۷, ۰۸:۴۵ ب.ظ)cyletech نوشته: اون قسمت که میخوای اون عکس top نمایش داده بشه رو در body مشخص کن و کدی که بهت میده رو قرار بده.

اینم یکسری دیگه http://www.jquery4u.com/plugins/jquery-s...p-plugins/
نشد . این لینکی که دادید خیلی خوبه . اگه فرصت کردید اینو نگاه میکنید . روی اینی که خودتون معرفی کردید دقیق میگید چکار کنم.
http://forrst.com/posts/Animated_jQuery_...lugin-giM#
کدهای jquery رو قرار دادم فقط نمیدونم تو body لینک با آیدی toTop تعریف کنم یا div . هر دو رو انجام دادم نشد.
مرسی ... البته اگه فرصت داشتید..
آرام باش ؛ توكل كن ؛ تفكر كن و سپس آستينها را بالا بزن , آنگاه دستان خداوند را خواهي ديد كه زودتر از تو دست به كار شده است.امام علي عليه السلام.
  پاسخ
تشکر شده توسط :
#7
نقل قول:نشد . این لینکی که دادید خیلی خوبه . اگه فرصت کردید اینو نگاه میکنید . روی اینی که خودتون معرفی کردید دقیق میگید چکار کنم.
واسه اون پلاگینی که انتخاب کردی باید اینطوری نصبش کنی. در body اونجا که میخوای قرار بگیره دگمه‌ات اونجا خطوط زیر رو قرار بده.
کد:
<!--jquery ro ghabl az scripte zir bayad load koni-->
      <script src="jquery.toTop.js"></script> <!-- oon code jquery ke to link e hast ro bayad dar in file gharar bedi va loadesh koni-->
      <script>
        $.toTop({
            css: {
                border: '1px dotted gray',
                padding: 5
            },
            image: 'toTop.png'
        });
      </script>
یکسری توضیحاتم نوشتم اگه مشکلی باهاشون داشتی بهم بگو.
غایب
  پاسخ
تشکر شده توسط : pary_daryayi
#8
روم نمیشه بگم نشد ٰ؛ ولی خب ... ( آدمک خجالت هم نداره !!!)
منظورتون از این
کد:
<!--jquery ro ghabl az scripte zir bayad load koni-->
اینه ؟
کد:
<script type="text/javascript"  src="jquery.min.js"></script>
این که باید قبل از تگ بسته ی head لود بشه .
و در مورد این :
کد:
<script src="jquery.toTop.js"></script> <!-- oon code jquery ke to link e hast ro bayad dar in file gharar bedi va loadesh koni-->
کدوم لینک منظورتونه ؟
الان jquery.toTop.js کدهای داخلش رو از کجا بیارم ؟
آرام باش ؛ توكل كن ؛ تفكر كن و سپس آستينها را بالا بزن , آنگاه دستان خداوند را خواهي ديد كه زودتر از تو دست به كار شده است.امام علي عليه السلام.
  پاسخ
تشکر شده توسط :
#9
نقل قول:منظورتون از این
آره خودشه.

نقل قول: این که باید قبل از تگ بسته ی head لود بشه .
بستگی به مصرفت داره. قبل از بسته شدن head بذاری روی سرعت بارگذاری سایتت تأثیر منفی میذاره ولی اون پایین مسئله ای نیست. اون بالا هم گذاشتی عیبی نداره. فقط باید قبل اون اسکریپت باشه.

نقل قول:کدوم لینک منظورتونه ؟
الان jquery.toTop.js کدهای داخلش رو از کجا بیارم ؟
برو اینجا http://forrst.com/posts/Animated_jQuery_...plugin-giM# یکسری کد جی کوئری بهت داده اونارو سیو کن در فایلی به نام jquery.toTop.js .
غایب
  پاسخ
تشکر شده توسط : pary_daryayi
#10
ممنون آقا علیرضا.من قبلش هم همین کارا رو انجام داده بودم ؛ الان نظمش بیشتره ...
فقط image رو با این که درست آدرس دهی کردم دیده نمیشه. یه image تو body هست ؛ یه image هم تو کد jquery . هر دو رو دست کاری کردم. شما امتحان کردین؟انجام شد این کد ؟
آرام باش ؛ توكل كن ؛ تفكر كن و سپس آستينها را بالا بزن , آنگاه دستان خداوند را خواهي ديد كه زودتر از تو دست به كار شده است.امام علي عليه السلام.
  پاسخ
تشکر شده توسط :


پرش به انجمن:


کاربران در حال بازدید این موضوع: 2 مهمان