خانه آموزش CSS آموزش ویژگی های CSS آموزش ویژگی scroll-behavior در CSS

آموزش ویژگی scroll-behavior در CSS

توسط

۱۳۹۹-۰۳-۳۰

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش ویژگی scroll-behavior در CSS با من همراه باشید.

آموزش ویژگی scroll-behavior در CSS

Free-Learn

آنچه در این جلسه میخوانید :

1 ویژگی scroll-behavior در CSS
2 مثال از این ویژگی
3 جدول مشخصات ویژگی scroll-behavior در CSS
4 پشتیبانی مرورگرها
5 شکل نوشتاری
6 جدول مقادیر ویژگی scroll-behavior در CSS
7 نکات و توضیحات

ویژگی scroll-behavior در CSS

با استفاده از ویژگی جذاب scroll-behavior در CSS میتوان نحوه پرش و اسکرول شدن صفحه وقتی بروی لینک درون صفحه ای کلیک میشود را مشخص و یا تعریف کرد، نمیدونم باید چجوری توضیحش بدم، فقط میتونم بگم مثال شماره ۱ رو مشاهده نمایید بطور کامل متوجه خواهید شد.

Free-Learn

مثال از این ویژگی

در ادامه میتوانید یک مثال از ویژگی scroll-behavior را در زبان CSS مشاهده نمایید.

مثال شماره ۱ : استفاده از ویژگی scroll-behavior در CSS

html{
 scroll-behavior: smooth;
}

html{

scroll-behavior: smooth;

}

امتحان کنید

مثال شماره ۲ : استفاده از کتابخانه jquery در جاوااسکریپت ( چون برخی از مرورگرها از ویژگی Scroll-Behavior پشتیبانی نمیکنند پس بهتره از jquery استفاده نمایید چون در همه ی مرورگرها پشتیبانی میشود )

<script>
$(document).ready(function(){
  $("a").on('click', function(event) {
    if (this.hash !== "") {
      event.preventDefault();
      var hash = this.hash;
      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 800, function(){
        window.location.hash = hash;
      });
    }
  });
});
</script>

$(document).ready(function(){

$("a").on('click', function(event) {

if (this.hash !== "") {

event.preventDefault();

var hash = this.hash;

$('html, body').animate({

scrollTop: $(hash).offset().top

}, 800, function(){

window.location.hash = hash;

});

}

});

</script>

امتحان کنید

مثال شماره ۳ : ساخت دکمه رفتن به بالای صفحه ( استفاده از jquery – روش اول )

<!DOCTYPE html>
<html id="top">
<head>
<style>

a#my-top-btn{
 background-color:#fff;
 display:block;
 text-align:center;
 box-shadow: 2px 5px 30px rgba(0,0,0,.1);
 text-decoration:none;
 padding:10px;
 color:blue;
}

</style>
</head>
<body>

<div class="my-box">
 <a id="my-top-btn" href="#top">برو به بالای صفحه</a>
</div>

</body>
</html>

<!DOCTYPE html>

<head>

<style>

a#my-top-btn{

background-color:#fff;

display:block;

text-align:center;

box-shadow: 2px 5px 30px rgba(0,0,0,.1);

text-decoration:none;

padding:10px;

color:blue;

}

</style>

</head>

<body>

<a id="my-top-btn" href="#top">برو به بالای صفحه</a>

</div>

</body>

</html>

امتحان کنید

مثال شماره ۴ : ساخت دکمه رفتن به بالای صفحه ( استفاده از jquery – روش دوم )

<script>
var btn = $('#button');
$(window).scroll(function() {
  if ($(window).scrollTop() > 300) {
    btn.addClass('show');
  } else {
    btn.removeClass('show');
  }
});
btn.on('click', function(e) {
  e.preventDefault();
  $('html, body').animate({scrollTop:0}, '300');
});
</script>

var btn = $('#button');

$(window).scroll(function() {

if ($(window).scrollTop() > 300) {

btn.addClass('show');

} else {

btn.removeClass('show');

}

});

btn.on('click', function(e) {

e.preventDefault();

$('html, body').animate({scrollTop:0}, '300');

});

</script>

امتحان کنید

مثال شماره ۵ : ساخت دکمه رفتن به بالای صفحه ( استفاده از jquery – روش سوم )

<a href="#top">برو بالای صفحه</a>

<script>
$("a[href='#top']").click(function() {
  $("html, body").animate({ scrollTop: 0 }, "slow");
  return false;
});
</script>

<a href="#top">برو بالای صفحه</a>

$("a[href='#top']").click(function() {

$("html, body").animate({ scrollTop: 0 }, "slow");

return false;

});

</script>

امتحان کنید

Free-Learn

جدول مشخصات ویژگی scroll-behavior در CSS

در جدول زیر میتوانید مشخصات کلی این ویژگی را در زبان CSS مشاهده نمایید.

مقدار پیش فرض	auto
قابل ارث بری	ندارد \| اطلاعات بیشتر
قابل متحرک سازی	ندارد \| اطلاعات بیشتر
نسخه	CSS Object Model View Module
نحوه استفاده در جاوااسکریپت	object.style.scrollBehavior=”smooth”;

Free-Learn

پشتیبانی مرورگرها

در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از ویژگی scroll-behavior در CSS پشتیبانی میکنند یا خیر.

نام ویژگی	Chrome	Firefox	Opera	Safari	IE
scroll-behavior	۶۱٫۰	۳۶٫۰	۴۸٫۰	خیر	خیر

Free-Learn

شکل نوشتاری

نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این ویژگی در CSS بصورت زیر می باشد.

scroll-behavior: auto|smooth|initial|inherit;

1	scroll-behavior: auto\|smooth\|initial\|inherit;

Free-Learn

جدول مقادیر ویژگی scroll-behavior در CSS

در جدول زیر میتوانید، مقادیری را که میتوان در این ویژگی استفاده کرد مشاهده نمایید.

مقدار	توضیح
auto	پیش فرض – اسکرول بین عناصر بصورت عادی پرش ( بدون هیچ تحرکی ) میکند
smooth	اسکرول بصورت نرم یا صاف یا متحرک بین عناصر جابه جا میشود
initial	استفاده از مقدار پیش فرض یا اولیه \| اطلاعات بیشتر
inherit	استفاده از مقدار پدر یا والد ( به ارث بری ) \| اطلاعات بیشتر

Free-Learn

نکات و توضیحات

این ویژگی در مرورگرهای سافاری ( Safari ) و اینترنت اکسپلورر ( IE ) پشتیبانی نمیشود
برای سازگاری و کارایی مطمعن پیشنهاد میکنم همانند مثال شماره ۲ از جی کوئری ( jquery ) استفاده نمایید.

Free-Learn

دریافت PDF یا پرینت این مطلب