smooth scroll

Smooth Scroll

 
<button class="smooth-scroll">

    Liên hệ với nhà cung cấp

</button>

// +---------------------+

// | Click div.smooth-scroll chạy xuống div.inquiry-msg-wrapper

// +---------------------+

<div class="inquiry-msg-wrapper">

    Content suppliers    

</div>

**** CSS

html {

  scroll-behavior: smooth;

}

.btn-inquiry {

  cursor: pointer;

  transition: transform 0.2s ease, opacity 0.2s ease;

}

.btn-inquiry:hover {

  opacity: 0.9;

  transform: translateY(-2px); 

  /* Hiệu ứng nhích nhẹ nút khi di chuột */

}

**** JavaScript

$(document).ready(function() {

    $('.smooth-scroll').on('click', function(e) {

        e.preventDefault();        

        // Lấy vị trí top của phần tử mục tiêu

        var targetOffset = $('.inquiry-msg-wrapper').offset().top;        

        // Nếu menu của bạn là menu cố định (fixed header), hãy trừ đi chiều cao menu tại đây (ví dụ: - 70)

        var headerHeight = 0; 

        // Thực hiện hiệu ứng cuộn mượt trong 800ms

        $('html, body').animate({

            scrollTop: targetOffset - headerHeight

        }, 800);

    });

});