Custom scroll to.

Hi mọi người, hôm nay có bạn hỏi làm sao để hiển thị title của scroll luôn mà không cần phải hover vào trong Flatsome theme. Nên mình viết bài này chia sẻ đến các bạn cách custom scroll to thành danh mục chạy dọc màn hình luôn mà không phải là bullet như xưa nữa nhé :D. Chỉ thay 1 xí js và css đơn giản thôi.

Hình ảnh demo đây:
Demo online: Duocpham.quangtriweb.com
Cách làm:
1. Các bạn mở themes/flatsome/assets/js/flatsome.js tìm đoạn code bên dưới.

e=jQuery(".scroll-to-bullets"),i=flatsomeVars.sticky_height;e.length&&(e.children().tooltipster("destroy"),e.remove()),jQuery("li.scroll-to-link").remove(),t.length&&(e=jQuery('<div class="scroll-to-bullets hide-for-medium"/>'),jQuery("body").append(e),t.each(function(t,e){var n=jQuery(e),o=n.data("link"),r=n.data("title"),s=n.data("bullet"),a=n.offset().top-i,l='a[href*="'+(o||"<nolink>")+'"]';if(s){var c=jQuery('\n <a href="'+o+'" data-title="'+r+'" title="'+r+'">\n <strong></strong>\n </a>\n ');

2. Sửa lại như code bên dưới.

e=jQuery(".scroll-to-bullets"),i=flatsomeVars.sticky_height;e.length&&(e.children().tooltipster("destroy"),e.remove()),jQuery("li.scroll-to-link").remove(),t.length&&(e=jQuery('<div class="scroll-to-bullets hide-for-medium"/>'),jQuery("body").append(e),t.each(function(t,e){var n=jQuery(e),o=n.data("link"),r=n.data("title"),s=n.data("bullet"),a=n.offset().top-i,l='a[href*="'+(o||"<nolink>")+'"]';if(s){var c=jQuery('\n <a href="'+o+'" data-title="'+r+'" title="'+r+'">\n <strong>'+r+'</strong>\n </a>\n ');

để ý thì chỉ sửa mỗi chỗ này thôi 😀 

<strong>'+r+'</strong>

3. Tiếp theo các bạn mở file style.css của theme hoặc style.css của childtheme nha. Thêm cho mình đoạn css này và lưu lại.

.scroll-to-bullets a {
    display: block;
    border: none;
    background-color: #53ac19;
    margin: 0px 0px;
    width: auto;
    height: auto;
    border-radius: 0px; 
    box-shadow: none;
    color: #fff;
    padding: 3px;
	border-bottom: 1px solid #fff;
}
.scroll-to-bullets a:hover {
    background-color: #417121;
    color: #fff;
}
.scroll-to-bullets a.active{
    background-color: #417121;
    color: #fff;
}

4. Lưu lại và xem kết quả nhé…Chúc các bạn thành công.
Nếu cảm thấy bài viết có ích hoặc góp ý comment bên dưới giúp mình nhé. Cảm ơn

Thành Trung

Yêu công nghệ. Tốt nghiệp chuyên ngành Công Nghệ Thông Tin. Theo học PHP nhưng đang làm Front-end, Freelancer

Bình luận

    1. Thành Trung Có 170 bình luận Admin

      nếu bạn có solution tốt hơn thì có thể chia sẻ luôn tại đây để mọi người cùng biết ạ…Thank bạn

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *