Một chức năng như nút "lên" của trang web làm cho tài nguyên Internet thuận tiện hơn cho khách truy cập. Nó giúp bạn dễ dàng di chuyển từ bất kỳ đâu trên trang lên đầu trang. Đây là điều bắt buộc đối với các cửa hàng và trang web trực tuyến có các bài báo lớn đòi hỏi phải cuộn xuống lâu.
Nó để làm gì
Hiện tại, hầu hết các trang web không có chức năng như nút "lên" và không có gì quan trọng trong điều này. Nhưng việc sử dụng nó có thể mang lại nhiều lợi ích cho cả tài nguyên Internet và cho khách truy cập.
Lợi cho khách
Điều này thường xảy ra khi trang của tài nguyên Internet được tải nhiều thông tin, khi một bài báo thông tin chiếm nhiều dung lượng và bạn phải cuộn chuột xuống trang. Ngoài ra, ở cuối bài viết có thể có nhiều bình luận về nó.
Khi khách đọc một bài báo, không có gì mệt mỏi khi cuộn trang xuống, nhưng khi văn bản đã kết thúc và bạn phải di chuyển lên, nó bắt đầu hơi mệt mỏi. Hầu hết mọi người sẽ chỉ đơn giản là quá lười biếng để cuộn trong một thời gian dài và họ sẽ đơn giản đóng trang web, thay vì đi dạo một vòng quanh các vùng mở rộng của nó.
Sử dụng nútđể chuyển ngay lên đầu trang, giúp thuận tiện hơn khi dành thời gian trên trang.
Lợi ích cho tài nguyên Internet
Những mặt tích cực đối với tài nguyên tự nó đến từ các yếu tố trong quá khứ, vì việc điều hướng trang web dễ dàng hơn sẽ cải thiện các yếu tố hành vi vì tất cả khách truy cập sẽ tích cực hơn trong hành động của họ và chuyển sang các trang khác.
Do đó, những yếu tố hành vi này ảnh hưởng đến thái độ của tất cả các công cụ tìm kiếm đối với trang web và dẫn đến sự cải thiện vị trí trong kết quả tìm kiếm.
Cách tự tạo nút "up" trên trang web
Đối phó thêm. Bạn luôn có thể tự mình tạo nút cuộn lên cho một trang web trên bất kỳ CMS nào bằng cách làm theo một vài bước cực kỳ đơn giản:
- tạo hình;
- tạo kịch bản;
- tạo kiểu nút;
- thêm vào trang web.
Hình ảnh nút
Để thêm nút "lên" trên trang web, trước tiên bạn cần tạo biểu tượng chính nó, khi nhấp vào, người dùng sẽ di chuyển lên đầu trang. Để thực hiện việc này, bạn có thể sử dụng các tùy chọn có sẵn, trong đó bạn luôn có thể chọn tùy chọn phù hợp nhất.
Để cải thiện giao diện của nút, chúng tôi cần thực hiện một số cải tiến, cụ thể là tạo một hình vẽ cho phép chúng tôi kết hợp các hình ảnh nền dựa trên CSS, từ đó tạo hoạt ảnh từ chúng.
Đối với các tác phẩm đồ họa, bạn có thể sử dụng bất kỳ trình chỉnh sửa nào. Nhưng lựa chọn thuận tiện nhất sẽ là một dịch vụ trực tuyến. PIXLR, vì không có gì để tải xuống ở đây và bạn có thể sử dụng nó trực tiếp trong trình duyệt của mình.
Để bắt đầu, trong cửa sổ trình chỉnh sửa xuất hiện, hãy chọn trường "Tải lên hình ảnh từ máy tính". Hãy lấy hình ảnh của một tên lửa làm ví dụ.
Nếu kích thước của biểu tượng đã chọn quá lớn, thì bạn sẽ cần phải điều chỉnh kích thước nhỏ. Để thực hiện việc này, hãy chuyển đến menu trên cùng và chọn trường "Chỉnh sửa" và sau "Chuyển đổi tự do …"
Tiếp theo, các điểm đánh dấu đặc biệt xuất hiện bên cạnh hình ảnh, di chuyển mà bạn có thể thay đổi kích thước của hình ảnh. Để duy trì tỷ lệ, bạn có thể sử dụng phím Shift, giữ phím bạn cần để di chuyển các điểm đánh dấu màu xanh lam. Khi kết thúc các bước này, hình ảnh của một tên lửa sẽ thu được.
Bước tiếp theo là tạo một bản sao của lớp.
Bây giờ bạn cần di chuyển hình ảnh tên lửa từ lớp mới lên một chút. Để thực hiện việc này, sẽ rất tiện lợi khi sử dụng công cụ di chuyển, nằm ở cột thứ hai của menu bên trái và mũi tên lên trên bàn phím.
Bây giờ chúng ta cần làm cho hình trên cùng màu đen và trắng. Điều này có thể được thực hiện bằng cách sử dụng mục "Correction" - "Hue / Saturation" trong menu trên cùng. Để khử bão hòa hoàn toàn, thanh trượt Saturation phải được đặt thành -100. Hành động này sẽ cho phép bạn tạo hiệu ứng trong đó nút "Lên" sẽ chuyển từ màu đen và trắng sang màu khi bạn di chuột qua nó.
Điểm cuối cùng là loại bỏ không gian thừa xung quanh hai bức tranh. Để thực hiện việc này, hãy chọn mục "Cắt" từ menu bên trái vàchúng tôi chỉ chọn hai tên lửa trong một hình chữ nhật. Để thực hiện cắt, nhấn phím Enter.
Kết quả là một hình ảnh không có thêm dung lượng trống. Bạn sẽ cần ghi lại chiều rộng và chiều cao của hình ảnh kết quả, vì những dữ liệu này sẽ hữu ích trong bước tiếp theo.
Để lưu các bạn click vào "File" - "Lưu", ở đoạn bên trái "My Computer" chúng ta ghi tên ảnh (chỉ bố cục tiếng Anh), chọn định dạng (trong này trường hợp, PNG) và nhấp vào nút "Có".
Tệp với script của nút "up"
Bạn không cần viết script trong trường hợp này. Có thể sử dụng phiên bản công khai, thực hiện một số sửa đổi đối với mã đã hoàn thành.
Để làm điều này, bạn cần tải xuống bất kỳ trình chỉnh sửa mã nào. Tùy chọn phổ biến nhất và cũng miễn phí là Notepad ++. Sau khi cài đặt nó, bạn cần sao chép và dán tất cả mã này vào nó:
| $ (tài liệu).ready (function () {$ (window).scroll (function () {if ($ (this).scrollTop () > 0) {$ (' scroller'). FadeIn ();} else {$ (' scroller'). fadeOut ();}}); $ (' scroller'). click (function () {$ ('body, html'). animate ({scrollTop: 0}, 400); trả về false;});}); |
Tiếp theo, nhấp vào menu trên cùng "Tệp" - "Lưu dưới dạng …", sau đó chúng tôi lưu mã ở định dạng.js. Sau đó, bạn có thể sử dụng mã này trên trang web của mình bằng cách tải các tệp script và hình ảnh lên nó bằng kết nối FTP.
Cài đặt tại chỗ
Để thiết lập nút cuộn lên cho trang web, bạn cần đặtmã địa điểm bắt buộc. Bạn cần nhập nó trước thẻ.
Tạo Kiểu Nút bằng CSS
Thông thường nhất, nút "lên" của trang web nằm ở dưới cùng ("chân trang").
Mã sau phải được thêm vào tệp style.css của trang web:
|
/Nút Lên/ .scrollTop { background: url ('images / up.png') 0 0 no-repeat; /đường dẫn hình ảnh gốc/ width: 39px; /nút width/ height: 96px; /50% chiều cao nút/ bottom: 5px; /phần đệm dưới cùng ở vị trí cố định/ left: 89%; /shift sang trái/ }.scrollTop: hover {background-position: 0 -108px; } /độ lệch nền/" |
Trong trường hợp này, dữ liệu chiều rộng và chiều cao của hình ảnh đó sẽ là cần thiết. Bạn chỉ cần nhập dữ liệu nhận được vào mã và nút "lên" cho trang web sẽ sẵn sàng! Còn gì nữa?
Nút lên cho trang Wordpress
Đối với CMS này, nút "Lên" có thể được thực hiện bằng các plugin cũng như độc lập.
Phương pháp plugin là tiện lợi và dễ cài đặt nhất, vì nó chỉ yêu cầu bạn nhấp vào nút cài đặt và định cấu hình tất cả các chức năng trong menu plugin.
Lựa chọn thứ hai nên được tiếp cận một cách thận trọng, vì nó sẽ rất dễ nhiễm vi-rút trên trang web. Tùy chọn phổ biến nhất và đã được chứng minh là một plugin có tên là Scroll Back To Top. Bạn có thể tải xuống bằng cách sử dụng tìm kiếm chuẩn cho các plugin Wordpress.
Phần mở rộng này cónhiều chức năng, và sẽ rất dễ dàng để tùy chỉnh nút "lên" cho một trang Wordpress. Không nhất thiết phải thay đổi tất cả các giá trị, bạn chỉ cần định cấu hình giao diện và vị trí của nút trên trang web.
Như bạn có thể thấy, việc thiết lập nút up bằng plugin rất dễ dàng. Nhưng có một sắc thái quan trọng, đó là mỗi plugin được cài đặt sẽ tải CMS. Điều này có thể ảnh hưởng đến tốc độ của tài nguyên Internet. Đó là lý do tại sao hầu hết chủ sở hữu trang web cố gắng thực hiện tất cả các thay đổi trực tiếp trong mã, chứ không phải với sự trợ giúp của các tiện ích mở rộng của bên thứ ba. Bạn có thể tạo nút "up" cho một trang HTML, điều này sẽ giảm thiểu tài nguyên tiêu thụ.
Trước khi thay đổi tất cả các tệp hệ thống Wordpress, bạn cần sao lưu chúng. Sau đó, bạn có thể làm theo tất cả các bước để tạo nút của riêng mình, được mô tả ở trên.
Nút "up" cho Joomla
CMS Joomla cũng hỗ trợ cài đặt các plugin, giống như Wordpress. Phiên bản thành công nhất của nút "lên" cho một trang web trên Joomla 3 là một tiện ích mở rộng có tên là Đầu trang.
Trong CMS này, có thể cài đặt bất kỳ plugin nào thông qua "Trình quản lý tiện ích mở rộng". Đối với điều này, bạn cần:
- tải xuống plugin trên Internet;
- nhấp vào nút "Duyệt qua" trong trình quản lý tiện ích mở rộng;
- chọn kho lưu trữ đã tải xuống;
- nhấp vào "Tải xuống" và cài đặt.
Bây giờ bạn cần kích hoạt nó trong "Trình quản lý plugin". Đối với điều nàybạn cần đi đến phần này, tìm plugin và chuyển trạng thái của nó thành "đã bật".
Bước tiếp theo là định cấu hình tất cả các thông số tiện ích mở rộng bằng cách sử dụng cùng một phần nơi bạn cần tìm "Thông số cơ bản" của plugin này ở phía bên phải.
Đầu Trang có chức năng sau:
- Run in / administrator - bật tùy chọn không chỉ trên tài nguyên Internet mà còn trong chính bảng Joomla CMS.
- Vị trí Hiển thị Nút - người dùng phải tua lại bao nhiêu pixel để nút lên xuất hiện.
- Văn bản Nút Bỏ qua - sự hiện diện của văn bản trên nút.
- Luôn ở trên cùng - trang của trang web sẽ luôn được hiển thị từ trên cùng. Khi sử dụng neo để cuộn đến một vị trí cụ thể trên trang, bạn không cần bật tùy chọn này.
- Smooth Scroll - giúp cuộn trang mượt mà hơn.
- Thời lượng cuộn - thời gian mà sau đó trang sẽ hoàn toàn chuyển về đầu.
- Chuyển đổi cuộn - Thêm nhiều hiệu ứng hình ảnh hơn để cuộn.
- Transition Easing - "làm suy yếu" chuyển động lên đầu trang.
- Vị trí liên kết - vị trí của biểu tượng. Theo mặc định, nút này nằm ở góc dưới bên phải.
- Sử dụng Kiểu - kiểu nút riêng lẻ, có thể được đặt trong trường bên dưới. Nếu được chuyển sang giá trị âm, thì tất cả cài đặt kiểu sẽ được lấy từ chủ đề đang hoạt động của trang web.
- Kiểu Liên kết - một trường để nhập các thông số kiểu nút của bạn.
Để tùy chỉnh kiểu của nút "lên", bạn phải có ít nhấtKiến thức CCS. Nếu không, bạn nên chuyển giá trị của thông số áp chót thành "Không".
Một sắc thái quan trọng khác là dòng chữ thông thường trên biểu tượng có chứa dòng chữ tiếng Anh: Return to Top. Văn bản như vậy không thể xuất hiện trên trang web nói tiếng Nga, vì vậy bạn chỉ cần tắt nó trong thông số plugin hoặc thay đổi nó thành tiếng Nga.
Để thay đổi dòng chữ này, bạn cần truy cập máy chủ trang web bằng FTP hoặc trình quản lý tệp được tích hợp trong máy chủ. Tiếp theo, trong thư mục "/ administrator / language / en-GB /", bạn cần tìm một tệp có tên "en-GB.plg_system_topofthepage.ini".
Trước khi thay đổi văn bản, bạn nên thay đổi mã hóa của tài liệu này thành UTF-8. Điều này sẽ giúp hiển thị bình thường các chữ cái tiếng Nga.
Tiếp theo chúng ta tìm thấy dòng sau:
| "PLG_SYS_TOPOFTHEPAGE_GOTOTOP=" Quay lại đầu trang "" |
và thay đổi cụm từ trong dấu ngoặc kép sang tiếng Nga. Bạn có thể sử dụng các cụm từ như "Lên!", "Lên đầu!" hoặc “Lên!”.
Cuối cùng, bạn sẽ cần lưu tệp đã sửa đổi và kiểm tra nút "lên" cho trang web trên Joomla.
Nút lên cho Ucoz
Nút "lên" cho trang web trên Ucoz sẽ phải được thực hiện bằng cách sử dụng chèn mã, vì không thể kết nối các plugin cho CMS này. Tuy nhiên, điều này không yêu cầu phải nghiên cứu lâu về các tệp hệ thống và tìm kiếm các dòng cần thiết, bạn chỉ cần dán một đoạn mã nhỏ vào đúng vị trí.
Để cài đặt chúng tôiyêu cầu:
- đi tới "Bảng điều khiển -> Thiết kế -> Quản lý thiết kế (mẫu) -> Cuối trang web;
- chèn tập lệnh (có thể tìm thấy trên trang web chính thức của dự án và tài nguyên của bên thứ ba).
Kết
Sau đó, một biểu tượng sẽ xuất hiện ở góc dưới bên phải, chuyển người dùng lên đầu trang.
Như bạn có thể thấy, việc thiết lập nút quay lại cho bất kỳ CMS nào không đặc biệt khó. Bạn có thể sử dụng cả phương pháp cài đặt tự động (plugin) và phương pháp thủ công. Tuy nhiên, tùy chọn thứ hai vẫn là phù hợp nhất, vì nó không ảnh hưởng xấu đến hiệu suất của trang web.
Bạn có thể sử dụng nút "quay lại đầu trang" cho trang web HTML để giảm thiểu việc tiêu thụ tài nguyên của trang web, vì một số lượng lớn các tiện ích mở rộng có thể có tác động tiêu cực đến hiệu suất của tài nguyên. Một plugin nút "up" sẽ không thể ảnh hưởng lớn đến thời gian tải các trang của trang web, nhưng trong hầu hết các trường hợp, người dùng đã cài đặt ít nhất một tá plugin trên CMS. Trong trường hợp này, bất kỳ plugin nào cũng có thể ảnh hưởng xấu đến hiệu suất của các trang của trang web.
