Tiêu đề có vẻ hơi khó hiểu nếu viết mô tả dài hơn bạn có thể hiểu như thế này: Trên cùng là thanh menu chứa các liên kết id khác nhau và bên dưới là các widget có id tương ứng với id trên menu. Khi click vào liên kết sẽ cuộn đến widget có id tương ứng với id trên menu hoặc khi cuộn trang đến widget sẽ tự động thêm class active vào liên kết menu.
Ngoài ra khi trang tải mà URL trang có chứa tham số id trùng với widget cũng tự động cuộn đến widget và thêm class vào liên kết trên menu.
Tham khảo thêm: Cách tạo widget hiển thị bài viết của các blog khác nhau
 |
| Thêm class active vào menu và tạo hiệu ứng mượt khi cuộn trang đến ID hay click vào menu |
Cách làm này không mới và được rất nhiều trang chia sẻ như trường hợp trang codepen, nhưng lại ít khi áp dụng nó trong blogspot vì cách thêm class active vào menu và tạo hiệu ứng mượt khi cuộn trang đến ID hay click vào menu chỉ áp dụng với những trang landing page. Phương pháp thực hiện sử dụng code Jquery như sau:
Giả sử trang HTML có thanh menu đầu trang:
<nav class="menu">
<ul>
<li><a class="menu-item" href="#HTML1" title="Liên kết 1">Liên kết 1</a><.li>
<li><a class="menu-item" href="#HTML2" title="Liên kết 2">Liên kết 2</a><.li>
<li><a class="menu-item" href="#HTML3" title="Liên kết 3">Liên kết 3</a><.li>
<li><a class="menu-item" href="#HTML4" title="Liên kết 4">Liên kết 4</a><.li>
<li><a class="menu-item" href="#HTML5" title="Liên kết 5">Liên kết 5</a><.li>
</ul>
</nav>
Bên dưới có các widget
<div class="main-wrapper section" id="main">
<div class="widget HTML" id="HTML1"></div>
<div class="widget HTML" id="HTML2"></div>
<div class="widget HTML" id="HTML3"></div>
<div class="widget HTML" id="HTML4"></div>
<div class="widget HTML" id="HTML5"></div>
</div>
Bạn có thể sắp xếp các widget có id lộn xộn nhau chứ không nhất thiết phải theo thứ tự hoặc giữa các widget có thể là các widget khác không chứa id trên menu. Với liên kết menu cũng vậy bạn cũng có thể sắp xếp lộn xộn nhau và cũng có thể chèn liên kết có chứa URL đến trang khác vào cùng.
Đề xuất: Sai lầm cần tránh khi chèn URL trực tiếp trong blogspot
Để tự động thêm class active vào menu và tạo hiệu ứng mượt khi cuộn trang đến ID hay click vào menu bạn sẽ viết code bằng Jquery như sau, đặt code trước thẻ đóng </body>
<script>//<![CDATA[
window.addEventListener('load', function() {
var ref = $('.menu a[href*="#"]').not('.menu a[href="#"]').not('.menu a[href="#0"]'),
el = $('.widget'),url = window.location.href
// Check URL nếu có chứa tham số id thì scroll đến id đó
$(ref).each(function(i) {
if (url.indexOf($(ref[i]).attr('href')) != -1) {
var target = $(ref[i]).attr('href').replace('#', '')
$(el).each(function(k) {
var id = $(el[k]).attr('id')
if (target == id) {
$('html,body').animate({
scrollTop: $('#' + id).offset().top
}, 1000)
}
})
}
})
// Click vào link menu có chứa id scroll đến id
$(ref).on('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)
}
}
})
// Thêm class active vào link menu khi scroll đến id
$(window).scroll(function() {
$(el).each(function(i) {
var $this = $(this)
if ($this.position().top <= $(window).scrollTop()) {
$(ref).removeClass('active')
$(ref).eq(i).addClass('active')
} else {
$(ref).eq(i).removeClass('active')
}
})
})
})
//]]></script>
Tham khảo thêm: Cách thêm thuộc tính async hoặc defer vào thẻ script jquery.js
Các bạn xem demo tại địa chỉ trang nguồn cấp của mình tại: https://rss.themeblogspot.com/
