امیرحسین نائی | امیر اچ ان

اسکرول آهسته به نقاط مختلف صفحه

اسکرول آهسته به نقاط مختلف صفحه

برای اسکرول آهسته به نقاط مختلف صفحه ، از جی کوئری استفاده میکنیم .
ابتدا باید کتابخانه جی کوئری و تابع زیر را به صفحه اضافه کنیم :

	
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js"></script>
<script>
$(function() {
  $('a[href*="#"]:not([href="#"])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html, body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });
});
</script>
	

خب ، حالا به دو مورد نیاز داریم :

  • لینکی که با کلیک رو اون بریم به قسمتی از صفحه که میخواییم.
  • اون قسمتی از صفحه که میخواییم با کلیک رو لینک بریم اونجا.

برای ساخت لینک بصورت زیر عمل میکنیم.

	
<a href="#id" >Go</a>
	

حالا باید اون آیدی که تو بالا مشخص کردیم رو به یه عنصر بدیم مثلا :

	
<p id="id" >HelloWorld</p>
	
اینم یه مثال کامل :
	
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js"></script>
<script>
$(function() {
  $('a[href*="#"]:not([href="#"])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html, body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });
});
</script>
<b id="ahnaei" >ahnaei.ir</b>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<a href="#ahnaei">Click here</a>
	

تاریح ارسال/ویرایش پست : 5/8/1395

مدیر سایت

امیرحسین نائی | امیر اچ ان

امیرحسین نائی (amirhn - امیر اچ ان) هستم.
متولد 1379 عاشق❤️ برنامه نویسی با انواع زبان های مختلف 😃
از 15 سالگی یادگیری برنامه نویسی رو شروع کردم
و تا امروز همچنان درحال یادگیری هستم .
در تلاش برای تبدیل شدن به یک Full Stack Developer 💪
روز به روز بیشتر عاشق برنامه نویسی میشم و هرگز برام خسته کننده نمیشه !!!

نظرات

نظرات محمد حسین

سلام. چگونه میشه کاری کرد که هر چند ثانیه رنگ یک متن عوض بشه به طور خودکار

نظرات محمد حسین

عالی بود. واقعا خسته نباشید

ارسال نظر

account_circle
mail
security
متن نظر :