Thực đơn
trang chủYandex

Cuộn html mượt mà. Chuyển đổi suôn sẻ sang liên kết neo. Cách tạo liên kết neo HTML

Xin chào các bạn thân mến. Như bạn có thể nhận thấy, ở hầu hết các trình duyệt, thao tác cuộn trên các trang web rất sắc nét và không đẹp mắt. Và tất nhiên, tôi muốn làm cho việc cuộn trang web của mình mượt mà hơn; tất nhiên, điều này có thể được thực hiện và hơn nữa là không cần quá căng thẳng. Điều này được thực hiện bằng cách sử dụng một cách đơn giản Trình cắm JQuery và một số quy tắc CSS. Và để biết tất cả hoạt động như thế nào, tôi khuyên bạn nên xem bản demo bên dưới.

Ι

Chà, bây giờ chúng ta hãy chuyển sang gắn tính năng cuộn mượt mà vào trang web của chúng ta.

HTML

Đầu tiên, chúng ta sẽ cần đính kèm thư viện JQuery. Nếu bạn đã đính kèm rồi thì bỏ qua bước này:

Sau đó, chúng ta cần đính kèm chính plugin JQuery, plugin này chịu trách nhiệm cho việc cuộn mượt mà của chúng ta và cùng với nó có các phần riêng biệt Quy tắc CSS tự thay đổi thanh cuộn trên trang web. Chúng ta sẽ nói nhiều hơn về thanh cuộn trong bài học tiếp theo, nhưng bây giờ chỉ là cuộn mượt mà thôi. Và đây là các quy tắc và plugin:

Tất cả. Bây giờ chúng ta đã thực hiện bước đầu tiên và quan trọng. Bây giờ chúng ta cần thêm một quy tắc đơn giản vào Kiểu CSS trang web của chúng tôi.

CSS html, nội dung( chiều cao: 100%; )

Điều này là cần thiết để plugin của chúng tôi biết rằng chiều rộng của trang được kéo dài và bằng 100% chiều cao. Hãy nhớ thêm quy tắc này vào CSS của bạn, nếu không thao tác cuộn sẽ không hoạt động.

Kịch bản

Và bây giờ tôi đề xuất xem xét kỹ hơn ví dụ demo. Và chúng ta sẽ bắt đầu với HTML.

HTML trong bản demo Cuộn trơn dành cho trang web Nội dung Xin chào, Đây là văn bản thể hiện khả năng cuộn trang mượt mà trên trang web của bạn. Nó thực sự trông không tệ phải không :) Văn bản này sẽ được lặp lại. (function($)( $(window).load(function())( $("body").mCustomScrollbar(( theme:"dark-thin" )); )); ))(jQuery);

Như bạn có thể thấy, ở đây tôi đã sử dụng đánh dấu HTML5 hoàn toàn tiêu chuẩn, với tất cả các tập lệnh được chèn và Tệp CSS mà chúng ta đã nói ở trên. Tôi nghĩ rằng không có gì để giải thích ở đây, nếu bạn không hiểu gì, hãy nhớ hỏi trong phần bình luận.

Bây giờ chúng ta hãy xem các quy tắc CSS.

CSS từ bản demo @import url(http://fonts.googleapis.com/css?family=Bad+Script&subset=latin,cyrillic); @import url(http://fonts.googleapis.com/css?family=Lobster&subset=latin,cyrillic); body( màu nền: #fff; màu: #555; cỡ chữ: 14px; họ phông chữ: "Kịch bản xấu", chữ thảo; lề: 0; phần đệm: 0; chiều rộng tối thiểu: 480px; ) html, body( chiều cao: 100%; ) h2( cỡ chữ: 80px; căn chỉnh văn bản: giữa; họ phông chữ: "Tôm hùm", chữ thảo; độ dày phông chữ: 700; kiểu phông chữ: in nghiêng; màu sắc: #444; ) hr( chiều cao: 0; đường viền: không có; đường viền dưới cùng: 1px khối #eee; đường viền trên cùng: 1px khối #eee; lề dưới: 50px; xóa: cả hai; ) .cont( cỡ chữ: 30px; lề: 0 tự động ; đệm-top: 20px; chiều rộng: 50%; chiều rộng tối đa: 50%; ) .text( đệm-top: 15px; đệm-dưới: 20px )

Các quy tắc CSS cũng rất đơn giản và không có nhiều, ngoài ra bạn cũng có thể thấy phông chữ của Google được đính kèm ở đây để làm cho bản demo trông đẹp mắt.

Xin chào các bạn. Tôi muốn đề cập đến một chủ đề chẳng hạn như quá trình chuyển đổi suôn sẻ sang liên kết cố định trên trang web. Nếu bạn viết trên trang web của bạn văn bản đồ sộ, định dạng chính xác, kèm theo ảnh chụp màn hình và các thành phần khác, sau đó Cuộn trơn vào mỏ neo sẽ giúp thiết kế trở nên hấp dẫn hơn nữa. Nhưng trước tiên chúng ta hãy tìm hiểu nó là gì và nó sẽ hoạt động như thế nào. Bạn có thể xem ví dụ về công việc trên trang này bằng cách nhấp vào các mục trong danh sách này.

Liên kết neo là gìCách tạo liên kết neo HTML

Liên kết neo được thực hiện bằng ngôn ngữ đánh dấu siêu văn bản. Tạo một neo trong HTML hoàn toàn không khó. Tất cả những gì bạn cần là một chút kiến ​​thức về ngôn ngữ này và sự hiểu biết về cách thức hoạt động của nó. Nếu bạn không gặp bất kỳ vấn đề gì với việc này thì bạn có thể thực hiện nó mà không gặp nhiều khó khăn. Vì vậy, để neo vào trang HTML, bạn cần viết một cái gì đó như sau trong mã.

Và để đi đến địa điểm này trên trang có nhãn này, bạn cần viết nội dung này vào liên kết:

Chuyển đến nhãn trên một trang

Chuyển đến nhãn trên một trang

Với cách tiếp cận này, quá trình chuyển đổi sẽ được thực hiện bằng cách chuyển ngay từ nơi này sang nơi khác

Cuộn mượt mà để neo

Với sự phát triển của công nghệ web, người ta có thể tạo ra những trang web đẹp hơn, năng động hơn với nhiều hiệu ứng khác nhau, v.v. Và thật tuyệt vời khi bạn có thể khiến khách truy cập quan tâm đến điều gì đó ngoài nội dung và để lại ấn tượng tốt khi truy cập trang web. TRONG đến một mức độ nhất địnhđiều này rơi vào tay chủ sở hữu trang web. Để quá trình chuyển đổi sang neo diễn ra suôn sẻ, chúng ta sẽ sử dụng thư viện và kết nối nó hoàn toàn kịch bản nhỏ.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 < script type= "text/javascript" >$(document) .ready (function () ( $("a" ) .click (function() ( elementClick = $(this ) .attr ("href" ) ; Destination = $(elementClick) .offset () .top ; if ($.browser .safari ) ( $("body" ) .animate ( ( ScrollTop: Destination ) , 1100 ) ; ) else ( $( "html" ) .animate ( ( ScrollTop: Destination ) , 1100 ) ; ) trả về sai ; ) ) ; ) );

$(document).ready(function() ( $("a").click(function () ( elementClick = $(this).attr("href"); Destination = $(elementClick).offset().top ; if($.browser.safari)( $("body").animate(( ScrollTop: Destination ), 1100); )else( $("html").animate(( ScrollTop: Destination ), 1100); ) trả về sai; )); ));

Có ba cách để kết nối tập lệnh này. Đầu tiên là chèn vào trang giữa thẻ đầu. Thứ hai là mang nó đến tập tin riêng biệt và kết nối riêng như thế này:

Dán nhãn trên trang để đi tới nó

Thứ hai, nếu bạn muốn cuộn mượt mà không xảy ra đối với tất cả các neo mà chỉ đối với một số neo nhất định, bạn cần thay đổi dòng thứ ba của tập lệnh như thế này:

Chuyển đến nhãn trên một trang

Một sắc thái khác mà tôi muốn đề cập là, không giống như một neo HTML đơn giản, neo jQuery không đăng ký trong thanh địa chỉ liên kết trình duyệt đến neo khi điều hướng đến nó. Để bạn hiểu những gì tôi đang nói, tôi sẽ đưa ra một ví dụ về liên kết đến một điểm neo có thể trông như thế nào trong thanh địa chỉ của trình duyệt.

#mỏ neo

Vì vậy, trước tiên chúng ta hãy tìm hiểu liên kết neo hay chỉ là neo là gì. Liên kết neo là các liên kết đưa khách truy cập đến các vị trí cụ thể trên trang. Về cốt lõi, những thứ này giống như dấu trang. Nếu trang lớn và về cơ bản được chia thành các khối khác nhau, bạn có thể đảm bảo rằng khách truy cập có thể truy cập ngay vào phần mong muốn của trang mà không cần sử dụng cuộn.

Các liên kết neo này thường được sử dụng trên các trang F.A.Q. . Trên những trang như vậy có nhiều điểm khác nhau kèm theo câu trả lời cho Câu hỏi thường gặp. Để tránh phải cuộn qua văn bản theo cách thủ công, những câu hỏi này được đặt ở đầu với các liên kết đến đoạn văn mong muốn. Các liên kết neo này cũng thường được sử dụng trong các trang đích ( trang đích). Tôi cũng thường sử dụng các neo như vậy trong các trang đích nếu khách hàng yêu cầu. Các trang đích thường dài và do đó các neo như vậy sẽ giúp ích rất nhiều.

Bạn có thể xem ví dụ về cách hoạt động của các liên kết đó trên trang này:

Trong trường hợp của chúng tôi, thật đơn giản khối div. Về cơ bản, đó là quá trình chuyển đổi đơn giản. Khi bạn nhấp vào liên kết như vậy, khách truy cập sẽ ngay lập tức được chuyển đến phần của trang nơi đặt khối có mỏ neo.

Thực hiện chuyển động trơn truđối với các neo, bạn cần kết nối jQuery. Ngày xửa ngày xưa, tôi đã tìm kiếm kịch bản phù hợp rất lâu và lục lọi trong đống thông tin. Hơn một nửa hiển thị các tập lệnh không còn hoạt động trên các phiên bản mới của thư viện. Có lẽ bạn cũng đã tìm thấy những đoạn script này trước khi đến với trang web của tôi. Sau đó, tôi tình cờ thấy được kịch bản này, đây là một giải pháp tuyệt vời cho nhiệm vụ của tôi.

Để bắt đầu, bạn cần đưa thư viện jQuery vào tiêu đề trước phần đầu đóng hoặc ở phần chân trang trước phần thân đóng.

Đảm bảo rằng việc này chưa được thực hiện trước đó để không gây ra xung đột và không thể hoạt động của các tập lệnh.

Bây giờ, sau thư viện, chúng ta kết nối chính tập lệnh, tập lệnh này sẽ thực hiện hoạt ảnh chuyển tiếp mượt mà.

$(document).ready(function())( $("#menu").on("click","a", function (sự kiện) ( event.preventDefault(); var id = $(this).attr ("href"), top = $(id).offset().top; $("body,html").animate((scrollTop: top), 1500); )); ));

Dòng thứ hai của tập lệnh chỉ định ID của khối có liên kết neo. Ví dụ: bạn có thể tổ chức khối sau:

  • Liên kết tới neo 1
  • Liên kết tới neo 2
  • Liên kết tới neo 3
  • Liên kết tới neo 4

Dòng thứ sáu chứa số 1500 - thời gian tính bằng mili giây và bằng 1,5 giây. Đây là thời gian thực hiện quá trình chuyển đổi sang điểm neo mong muốn. Để tăng tốc hoặc làm chậm hoạt ảnh, chỉ cần thay đổi số.

Đó là tất cả, cảm ơn sự quan tâm của bạn. 🙂

Chào buổi chiều. Hôm nay tôi muốn nói với bạn về điều này hiệu ứng thú vị giống như một cuộn trơn tru đến một mỏ neo. Ví dụ: đây có thể là một menu ở đầu trang mà khi được nhấp vào, nó sẽ cuộn mượt mà đến phần tử tương ứng.

Bạn có thể đã thấy hiệu ứng tương tự trên các trang đích khác. Hôm nay bạn sẽ học cách thực hiện nó.

Di chuyển mượt mà đến điểm neo bằng cách sử dụng javascript

Trong một trong các dự án, nhiệm vụ là thực hiện hiệu ứng tương tự bằng cách cuộn mượt mà đến yếu tố cụ thể khi bạn nhấp vào một trong các mục menu.

Hãy bắt đầu bằng cách kết nối thư viện jquery vào dự án của chúng tôi và viết đường dẫn đến tập lệnh chịu trách nhiệm cuộn mượt mà:

Chúng tôi đã giải quyết vấn đề này. Bây giờ bạn cần đặt nhãn và neo để cuộn sẽ diễn ra.

Tôi sẽ kể cho bạn nghe ví dụ về thực đơn trong dự án cho thuê thiết bị chuyên nghiệp phục vụ công việc xây dựng và dọn dẹp. Đây rồi nguồn:

Như bạn có thể thấy, mọi thứ đều tiêu chuẩn và không có thủ thuật. Các khối tương ứng với menu sau đó đã được tạo trên trang đích. Họ tiết lộ một dịch vụ cụ thể. Cần phải thực hiện chuyển đổi suôn sẻ sang các khối này.

Để điều hướng đến vị trí mong muốn trên trang web, chỉ cần thêm một liên kết đến mã định danh khối mong muốn. Hãy làm điều đó.

Bây giờ bạn cần đặt các định danh “dọn dẹp”, “xây dựng”, “hành động” cho các khối tương ứng. Đối với tôi nó trông như thế này:

Hãy chú ý đến thuộc tính name="cleaning". Nó phải khớp với ID. Đây là kịch bản:

$(function () ( $("a.scrollto").click(function () ( let elementClick = $(this).attr("href") let Destination = $(elementClick).offset().top; $ ("html:not(:animated),body:not(:animated)").animate(( ScrollTop: Destination ), 1100); return false; )); ));

Nếu bạn, giống như tôi, cần triển khai việc cuộn đến một số phần tử, thì chỉ cần đặt số nhận dạng theo cách tương tự và thế là xong! Rất Một cách thuận tiện và dễ thực hiện. Tôi không nói nó là tốt nhất, nhưng nó hoạt động. Nếu ai đó có thể đơn giản hóa, rút ​​ngắn hoặc bằng cách nào đó cải thiện nó, tôi sẽ rất biết ơn bạn. Với tôi thì thế hiệu ứng này có thể hữu ích cho nhiều người.

Xin lưu ý ở đầu bài viết chúng tôi đã chỉ ra tên và đường dẫn của script như sau:

Nghĩa là, bạn cần tạo một thư mục trong thư mục gốc của trang web có tên là js và đặt tệp có tên perehod.js vào đó. Và sau đó chèn mã script vào đó. Đây là tôi, chỉ để đề phòng thôi. Nếu ai đó không hiểu thì sao?

Và đó là tất cả cho ngày hôm nay. Bây giờ bạn đã biết cách thực hiện điều này hiệu ứng mát mẻ, giống như một cuộn trang mượt mà đến một điểm cố định. Tạm biệt mọi người!

P.s.: Cảm ơn những người đã trả lời cuộc gọi trong trong mạng xã hội hỗ trợ ý tưởng cho bài viết mới. Tôi không biết tại sao bạn lại quyết định viết thư cho tin nhắn riêng tư, tốt hơn hết bạn nên để lại trong phần bình luận, như vậy sẽ dễ dàng hơn cho người khác viết đánh giá nếu họ thấy ai đó can đảm hơn đã làm việc đó.

bạn phương pháp này có một nhược điểm là nó không hoạt động tốt với wow.js, thứ mà chúng tôi đã sử dụng để tạo hoạt ảnh trong bài viết. Một số hoạt ảnh không phát và vẫn ở nguyên vị trí của chúng. chỗ trống. Nếu có ai biết cách khắc phục điều này, xin vui lòng viết trong phần bình luận hoặc trong