تبلیغات در اینترنت

تبلیغات در اینترنتگیفت کارت گوگل پلی
نمایش نتایج: از 1 به 6 از 6

مقاله: اموزش اختصاصی دکمه بازگشت به بالا | Back to Top

    1. اموزش اختصاصی دکمه بازگشت به بالا | Back to Top »

      اموزش اختصاصی دکمه بازگشت به بالا | Back to Top

      نگارش: , by (کاندیدای مدیریت)
      2013/03/15 04:33 PM
      امتیاز: 

      سلام دوستان امروز میخوام اموزش دکمه بازگشت به بالا \ Back to Top رو بهتون اموزش بدم ، این دکمه کاملن فارسی هست و با سلیقه ی زیبای ایرانی جور در میاد

      شروع میکنیم :


      قسمت اول : کد زیر رو هر جا دلتون میخواد وارد کنید :

      کد HTML:
      <p id="back-top" style="display: block;"> <a href="#top"><span></span>Back to Top</a> </p>
      قسمت دوم : حالا نوبت کد های css میرسه :

      کد:
      /* Back to top button */
      
      #back-top {
       position: fixed;
       bottom: 30px;
       right:100px;
      }
      #back-top a {
       width: 100px;
       display: block;
       text-align: center;
       font: 9px/100% Arial, Helvetica, sans-serif;
       text-transform: uppercase;
       text-decoration: none;
       color: #bbb;
       /* background color transition */
       -webkit-transition: 1s;
      	-moz-transition: 1s;
      	transition: 1s;
      }
      #back-top a:hover {
       color: #000;
      }
      /* arrow icon (span tag) */
      #back-top span {
       width: 100px;
       height: 33px;
       display: block;
       margin-bottom: 7px;
       background: #ddd url("http://up.vbiran.ir/uploads/136292435917841_0text-top.png") no-repeat center center;
       /* rounded corners */
       -webkit-border-radius: 4px;
      	-moz-border-radius: 4px;
       border-radius: 4px;
       /* background color transition */
       -webkit-transition: 1s;
      	-moz-transition: 1s;
      	transition: 1s;
      }
      #back-top a:hover span {
       background-color: #777;
      }
      /*VBIRAN-ANIMATED-SCROLL-GO-TO-TOP*/
      قسمت سوم : کد های jQuery رو واردکنید ( توصیه میکنم در قسمت head وارد کنید ، چون در صورتی که در body وارد بشه زودتر از بقیه کدها لود میشه و باعث کاهش سرعت میشه )

      کد:
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><script>
      $(document).ready(function(){
      
      
      	// hide #back-top first
      	$("#back-top").hide();
      	
      	// fade in #back-top
      	$(function () {
      		$(window).scroll(function () {
      			if ($(this).scrollTop() > 100) {
      				$('#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;
      		});
      	});
      
      
      });
      //Vbiran-Ahimated-Scroll
      </script>

      پایان | موفق باشید

      پیشنمایش
  1. Top | #2
    کاربر سایت

    ورژن ویبولتین
    4
    نوشته ها
    140
    میزان امتیاز
    18

    پیش فرض

    مرسی خوب بود

  2. Top | #3
    کاربر سایت

    ورژن ویبولتین
    4.2.0
    نوشته ها
    203
    میزان امتیاز
    26

    پیش فرض

    این کد ها باید تو کدوم بخش ها ریخته بشه؟

  3. Top | #4
    Cry
    کاربر سایت

    ورژن ویبولتین
    4.2.0
    نوشته ها
    2,661
    میزان امتیاز
    322

    پیش فرض

    forumhome.css - additional.css - forumdisplay - header

  4. Top | #5
    کاربر سایت

    ورژن ویبولتین
    4.2
    نوشته ها
    656
    میزان امتیاز
    71

    پیش فرض

    من کدهای باکس اول و سوم رو در header و باکس دوم رو در
    additional ریختم ولی وقتی به آخر پست میرسیم ظاهر میشه . اگه قرار باشه آخر پست نمایش داده باشه خود وی بی یکی رو انتهای پست داره میخواستم در طول پیمایش پست به صورت Hover نمایش داده بشه.

    چه کار میشه کرد؟

    البته تست کردم هستش ولی میره پشت پست بیت چکارش میشه کرد نره اون پشت ؟

  5. Top | #6
    کاربر سایت

    ورژن ویبولتین
    4.2
    نوشته ها
    656
    میزان امتیاز
    71

    پیش فرض

    آپدیت @Cry

اطلاعات موضوع

کاربرانی که در حال مشاهده این موضوع هستند

در حال حاضر 1 کاربر در حال مشاهده این موضوع است. (0 کاربران و 1 مهمان ها)

کسانی که این مقاله را دیده اند از این مقاله ها نیز بازدید کرده اند

  1. پاسخ: 178
    آخرين نوشته: 2016/10/20, 09:38 PM
  2. پاسخ: 2
    آخرين نوشته: 2013/12/28, 07:41 PM

کلمات کلیدی این موضوع

علاقه مندی ها (Bookmarks)

علاقه مندی ها (Bookmarks)

مجوز های ارسال و ویرایش

  • شما نمیتوانید موضوع جدیدی ارسال کنید
  • شما امکان ارسال پاسخ را ندارید
  • شما نمیتوانید فایل پیوست کنید.
  • شما نمیتوانید پست های خود را ویرایش کنید
  •