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

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

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

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

	
<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 سالگی یادگیری برنامه نویسی رو شروع کردم
و تا امروز همچنان درحال یادگیری هستم .
روز به روز بیشتر عاشق برنامه نویسی میشم و هرگز برام خسته کننده نمیشه !!!

نظرات

نظرات Mohammad Taha

دمت گرم دادا خیلی کمکم کرد

نظرات حسین

سام خیلی درست و ساده بود متشکر

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

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

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

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

ارسال نظر

account_circle
mail
security
متن نظر :