Hành vi cuộn trong css

Question

Thuộc tính CSS scroll-behavior đặt hành vi cho hộp cuộn khi thao tác cuộn được kích hoạt bởi API cuộn điều hướng hoặc CSSOM

Nội dung chính Show

định nghĩa chính thức
Tạo Jquery
Kết luận
Giới thiệu
Lời kết

Thử nó

Lưu ý rằng bất kỳ cuộn nào khác, chẳng hạn như cuộn do người dùng thực hiện, không bị ảnh hưởng bởi thuộc tính này. Khi thuộc tính này được chỉ định trên phần tử gốc, thay vào đó, nó sẽ áp dụng cho chế độ xem. Thuộc tính này được chỉ định trên phần tử body sẽ không lan truyền đến chế độ xem

Tác nhân người dùng được phép bỏ qua thuộc tính này

cú pháp

/* Keyword values */
scroll-behavior: auto;
scroll-behavior: smooth;

/* Global values */
scroll-behavior: inherit;
scroll-behavior: initial;
scroll-behavior: revert;
scroll-behavior: revert-layer;
scroll-behavior: unset;

Thuộc tính scroll-behavior được chỉ định là một trong các giá trị từ khóa được liệt kê bên dưới

giá trị

<div id="page-wrap">

  <h2 id="top">Smooth Page Scrolling</h2>

  <ul>
    <li><a href="#two">Go to Section 2</a></li>
    <li><a href="#three">Go to Section 3</a></li>
  </ul>

  <h2 id="one">Section 1</h2>
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
    Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus
    lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor,
    facilisis luctus, metus</p>

  <h2 id="two">Section 2</h2>
  <p>quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum
    sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus,
    tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>

  <h2 id="three">Section 3</h2>
  <p>quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum
    sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus,
    tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
  
<p><a href="#top">Top</a></p>
</div>

1

Hộp cuộn cuộn ngay lập tức

<div id="page-wrap">

  <h2 id="top">Smooth Page Scrolling</h2>

  <ul>
    <li><a href="#two">Go to Section 2</a></li>
    <li><a href="#three">Go to Section 3</a></li>
  </ul>

  <h2 id="one">Section 1</h2>
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
    Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus
    lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor,
    facilisis luctus, metus</p>

  <h2 id="two">Section 2</h2>
  <p>quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum
    sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus,
    tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>

  <h2 id="three">Section 3</h2>
  <p>quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum
    sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus,
    tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
  
<p><a href="#top">Top</a></p>
</div>

2

Hộp cuộn cuộn một cách mượt mà bằng cách sử dụng chức năng định thời gian do tác nhân người dùng xác định trong khoảng thời gian do tác nhân người dùng xác định. Tác nhân người dùng phải tuân theo các quy ước nền tảng, nếu có

định nghĩa chính thức

Giá trị ban đầu ________ 11 Áp dụng cho các hộp cuộnInheritednoComputed valueas đã chỉ địnhKiểu hoạt ảnhrời rạc

Smooth scrolling (sự thay đổi vị trí từ liên kết ban đầu đến vị trí cuối cùng) là một hình ảnh động rất tốt cho trang web, mang lại cảm giác trải nghiệm mượt mà bóng tối

Đây là mã thực thi công việc cuộn trang một cách trơn tru đến một điểm trên cùng một trang. Nó hợp nhất một số logic để xác định các liên kết nhảy và không nhắm vào các liên kết khác

xem ví dụ dưới đây. Khi ta click vào thẻ Go to Section2 nó sẽ chuyển sang section 2. khi click vào Go to Section 3 sẽ chuyển đến section 3. Click vào top sẽ quay về đầu trang Go to Section 2 nó sẽ chuyển sang section 2. khi click vào Go to Section 3 sẽ chuyển đến section 3. Click on top will quay về đầu trang

Tạo HTML

Tạo danh sách có 2 nút nhấp vào phần 2 và phần 3. sao cho thuộc tính có href = # +id của thẻ cần cuộn đến
Tạo id khi cuộn đến

<div id="page-wrap">

  <h2 id="top">Smooth Page Scrolling</h2>

  <ul>
    <li><a href="#two">Go to Section 2</a></li>
    <li><a href="#three">Go to Section 3</a></li>
  </ul>

  <h2 id="one">Section 1</h2>
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
    Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus
    lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor,
    facilisis luctus, metus</p>

  <h2 id="two">Section 2</h2>
  <p>quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum
    sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus,
    tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>

  <h2 id="three">Section 3</h2>
  <p>quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum
    sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus,
    tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
  
<p><a href="#top">Top</a></p>
</div>

Tạo Jquery

Lần đầu tiên ta xác nhận thẻ định nghĩa khi ta nhấp vào nó sẽ di chuyển đến 1 vị trí bất kỳ trong trang ta có. Chẳng hạn như khi nhấp Go to Section 2 nó sẽ chuyển đến h2 có id là "hai" Go to Section 2 nó sẽ chuyển đến h2 có id là "hai"

var data_id = $(this).attr('href'); // trả ra id mà bạn click. ví dụ Go to Section 2 với href="#two" thì với đoạn này ta sẽ nhận dc #two

Bước tiếp theo là di chuyển đến điểm bạn cần cuộn. with the best time distance asví dụ bên dưới là 0. 5s

$('html, body').animate({
    scrollTop: $(data_id).offset().top
  }, '500');

Xem demo ở codepen bên dưới đây

Kết luận

Qua bài viết này mình đã hướng dẫn các bạn Di chuyển mượt mà dễ dàng và hiệu quả. Các bạn thấy có nhiều cách hay hơn là có thể chia sẻ qua cmt nhé. Cảm ơn
Link tham khảo
- https. // thủ thuật css. com/snippets/jquery/smooth-scrolling/

Đã đăng ký Bản quyền

Đã đăng vào ngày 18 tháng 1 năm 2021 10. 17 một. m. 1 phút đọc 1 phút đọc

Giới thiệu

Chào mọi người. Hôm nay mình xin chia sẻ 1 techical nhỏ nhưng rất hữu ích khi tạo smooth scroll anchor link chỉ bằng CSS mà không cần dùng đến JS. Bình thường khi tạo anchor link scroll đến target hay page khác để sao cho nhiều mà ai cũng sẽ viết 1 đoạn JS đúng không nhỉ, nhưng chỉ với 1 dòng CSS sẽ giúp chúng ta tiết kiệm điện năng được nhiều thời gian và rất đơn giản

Cách làm

Để làm được cái này chúng ta sẽ sử dụng thuộc tính CSS scroll-behavior và pseudo-class

<div id="page-wrap">

  <h2 id="top">Smooth Page Scrolling</h2>

  <ul>
    <li><a href="#two">Go to Section 2</a></li>
    <li><a href="#three">Go to Section 3</a></li>
  </ul>

  <h2 id="one">Section 1</h2>
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
    Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus
    lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor,
    facilisis luctus, metus</p>

  <h2 id="two">Section 2</h2>
  <p>quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum
    sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus,
    tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>

  <h2 id="three">Section 3</h2>
  <p>quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum
    sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus,
    tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
  
<p><a href="#top">Top</a></p>
</div>

5 vào thẻ HTML

________số 8. là 1 thuộc tính được đặt cho việc cuộn trong 1 ô khi 1 neo nhận được 1 cuộn kích hoạt nó sẽ cuộn tới mục tiêu đó Để hiểu hơn mọi người có thể vào đây và thao tác thử với ví dụ sẽ dễ hiểu hơn nhiều. https. // nhà phát triển. mozilla. org/en-US/docs/Web/CSS/hành vi cuộn

<div id="page-wrap">

  <h2 id="top">Smooth Page Scrolling</h2>

  <ul>
    <li><a href="#two">Go to Section 2</a></li>
    <li><a href="#three">Go to Section 3</a></li>
  </ul>

  <h2 id="one">Section 1</h2>
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
    Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus
    lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor,
    facilisis luctus, metus</p>

  <h2 id="two">Section 2</h2>
  <p>quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum
    sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus,
    tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>

  <h2 id="three">Section 3</h2>
  <p>quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum
    sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus,
    tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
  
<p><a href="#top">Top</a></p>
</div>

5. để chỉ ra 1 phần tử đã nhận được tiêu điểm hoặc chứa các phần tử trong đó đã nhận được tiêu điểm https. // nhà phát triển. mozilla. org/en-US/docs/Web/CSS/. tập trung vào bên trong

Chúng ta sẽ viết dưới dạng toàn cầu cho toàn bộ phần tử nằm trong thẻ HTML, những phần tử bên trong khi được cuộn đến khi nhấn vào liên kết neo sẽ có cuộn khi nhận được tiêu điểm

1. HTML With HTML only to seting this menu

<a href="#content">Event</a>

<div id="content">Event Area</a>

2. CSS CSS we will to value for scroll-behavior is

var data_id = $(this).attr('href'); // trả ra id mà bạn click. ví dụ Go to Section 2 với href="#two" thì với đoạn này ta sẽ nhận dc #two

1 nhé.
______7

Lời kết

Hi vọng mẹo nhỏ này sẽ giúp những bạn nào chưa biết có thể dễ dàng tạo 1 nội dung điều hướng với anchor scroll một quãng mà không cần sử dụng đến Javascript

programming css