Hiệu ứng cuộn chuột mượt mà cho blogspot (smooth scrolling)

Smooth scrolling - Hiệu ứng cuộn chuột - có nghĩa là khi bạn click vào một button, hiệu thẻ <a> nào đó, nó sẽ cuộn chuộn từ từ đến vị trí được đánh dấu. Bài đầu tiên trong blog mình, là bài khai trương, mình sẽ giới thiệu cho các bạn 2 style hiệu ứng cuộn chuột. Tùy các bạn dùng nhé.
À mình cũng nói với các bạn điều này, mình không biết photoshop, thành ra các thumbnail của mình hoặc là đi mượn, hoặc là xấu nhé, nhưng cứ yên tâm về chất lượng bài viết, mình chỉ chia sẻ những thủ thuật hay mà thôi! Mong các bạn ủng hộ. Mình sẽ cố gắng mỗi ngày ra 1 bài.

Các bạn có thể xem demo bằng cách nhấn vào đây, nó sẽ cuộn chuột tới phần bình luận.

Cách thực hiện:

Bước 1: Truy cập blogger.com > Chủ đề > Chỉnh sửa HTML
Bước 2: Thêm thư viện Jquery nếu blog bạn chưa có (nếu có rồi thì bỏ qua bước này)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Bước 3: Chèn 1 trong 2 đoạn code dưới trước thẻ đóng </body>

Style 1:
Style 1 này, mình lấy từ Phú Cường Blogger

<script>
$(document).ready(function(){
  $("a").on('click', function(event) {
    if (this.hash !== "") {
      event.preventDefault();
      var hash = this.hash;
      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 800, function(){
        window.location.hash = hash;
      });
    }
  });
});
</script>

Style 2:

<script type='text/javascript'>
//<![CDATA[
jQuery.easing.jswing=jQuery.easing.swing;jQuery.extend(jQuery.easing,{def:"easeOutQuad",swing:function(e,f,a,h,g){return jQuery.easing[jQuery.easing.def](e,f,a,h,g)},easeInQuad:function(e,f,a,h,g){return h*(f/=g)*f+a},easeOutQuad:function(e,f,a,h,g){return -h*(f/=g)*(f-2)+a},easeInOutQuad:function(e,f,a,h,g){if((f/=g/2)<1){return h/2*f*f+a}return -h/2*((--f)*(f-2)-1)+a},easeInCubic:function(e,f,a,h,g){return h*(f/=g)*f*f+a},easeOutCubic:function(e,f,a,h,g){return h*((f=f/g-1)*f*f+1)+a},easeInOutCubic:function(e,f,a,h,g){if((f/=g/2)<1){return h/2*f*f*f+a}return h/2*((f-=2)*f*f+2)+a},easeInQuart:function(e,f,a,h,g){return h*(f/=g)*f*f*f+a},easeOutQuart:function(e,f,a,h,g){return -h*((f=f/g-1)*f*f*f-1)+a},easeInOutQuart:function(e,f,a,h,g){if((f/=g/2)<1){return h/2*f*f*f*f+a}return -h/2*((f-=2)*f*f*f-2)+a},easeInQuint:function(e,f,a,h,g){return h*(f/=g)*f*f*f*f+a},easeOutQuint:function(e,f,a,h,g){return h*((f=f/g-1)*f*f*f*f+1)+a},easeInOutQuint:function(e,f,a,h,g){if((f/=g/2)<1){return h/2*f*f*f*f*f+a}return h/2*((f-=2)*f*f*f*f+2)+a},easeInSine:function(e,f,a,h,g){return -h*Math.cos(f/g*(Math.PI/2))+h+a},easeOutSine:function(e,f,a,h,g){return h*Math.sin(f/g*(Math.PI/2))+a},easeInOutSine:function(e,f,a,h,g){return -h/2*(Math.cos(Math.PI*f/g)-1)+a},easeInExpo:function(e,f,a,h,g){return(f==0)?a:h*Math.pow(2,10*(f/g-1))+a},easeOutExpo:function(e,f,a,h,g){return(f==g)?a+h:h*(-Math.pow(2,-10*f/g)+1)+a},easeInOutExpo:function(e,f,a,h,g){if(f==0){return a}if(f==g){return a+h}if((f/=g/2)<1){return h/2*Math.pow(2,10*(f-1))+a}return h/2*(-Math.pow(2,-10*--f)+2)+a},easeInCirc:function(e,f,a,h,g){return -h*(Math.sqrt(1-(f/=g)*f)-1)+a},easeOutCirc:function(e,f,a,h,g){return h*Math.sqrt(1-(f=f/g-1)*f)+a},easeInOutCirc:function(e,f,a,h,g){if((f/=g/2)<1){return -h/2*(Math.sqrt(1-f*f)-1)+a}return h/2*(Math.sqrt(1-(f-=2)*f)+1)+a},easeInElastic:function(f,h,e,l,k){var i=1.70158;var j=0;var g=l;if(h==0){return e}if((h/=k)==1){return e+l}if(!j){j=k*0.3}if(g<Math.abs(l)){g=l;var i=j/4}else{var i=j/(2*Math.PI)*Math.asin(l/g)}return -(g*Math.pow(2,10*(h-=1))*Math.sin((h*k-i)*(2*Math.PI)/j))+e},easeOutElastic:function(f,h,e,l,k){var i=1.70158;var j=0;var g=l;if(h==0){return e}if((h/=k)==1){return e+l}if(!j){j=k*0.3}if(g<Math.abs(l)){g=l;var i=j/4}else{var i=j/(2*Math.PI)*Math.asin(l/g)}return g*Math.pow(2,-10*h)*Math.sin((h*k-i)*(2*Math.PI)/j)+l+e},easeInOutElastic:function(f,h,e,l,k){var i=1.70158;var j=0;var g=l;if(h==0){return e}if((h/=k/2)==2){return e+l}if(!j){j=k*(0.3*1.5)}if(g<Math.abs(l)){g=l;var i=j/4}else{var i=j/(2*Math.PI)*Math.asin(l/g)}if(h<1){return -0.5*(g*Math.pow(2,10*(h-=1))*Math.sin((h*k-i)*(2*Math.PI)/j))+e}return g*Math.pow(2,-10*(h-=1))*Math.sin((h*k-i)*(2*Math.PI)/j)*0.5+l+e},easeInBack:function(e,f,a,i,h,g){if(g==undefined){g=1.70158}return i*(f/=h)*f*((g+1)*f-g)+a},easeOutBack:function(e,f,a,i,h,g){if(g==undefined){g=1.70158}return i*((f=f/h-1)*f*((g+1)*f+g)+1)+a},easeInOutBack:function(e,f,a,i,h,g){if(g==undefined){g=1.70158}if((f/=h/2)<1){return i/2*(f*f*(((g*=(1.525))+1)*f-g))+a}return i/2*((f-=2)*f*(((g*=(1.525))+1)*f+g)+2)+a},easeInBounce:function(e,f,a,h,g){return h-jQuery.easing.easeOutBounce(e,g-f,0,h,g)+a},easeOutBounce:function(e,f,a,h,g){if((f/=g)<(1/2.75)){return h*(7.5625*f*f)+a}else{if(f<(2/2.75)){return h*(7.5625*(f-=(1.5/2.75))*f+0.75)+a}else{if(f<(2.5/2.75)){return h*(7.5625*(f-=(2.25/2.75))*f+0.9375)+a}else{return h*(7.5625*(f-=(2.625/2.75))*f+0.984375)+a}}}},easeInOutBounce:function(e,f,a,h,g){if(f<g/2){return jQuery.easing.easeInBounce(e,f*2,0,h,g)*0.5+a}return jQuery.easing.easeOutBounce(e,f*2-g,0,h,g)*0.5+h*0.5+a}});
$('a[href^="#"]').on('click', function (event) {
    var $target = $(this.getAttribute('href'));
    if ($target.length) {
        event.preventDefault();
        $('html, body').stop().animate({
            scrollTop: $target.offset().top
        }, 800, 'easeInOutQuad')
    }
});
//]]></script>

Trong đó: 800 là tốc độ cuộn chuột

Cách dùng:

Cấu trúc hoàn chỉnh của 1 đoạn giúp tạo hiệu ứng cuộn. Nó sẽ có dạng như sau:

<a href="#vị_trí_cần_cuộn_đến" title="Example">Click vào đây</a> // Phần tử nguồn

<p id="#vị_trí_cần_cuộn_đến"></p> // Phần tử đích

Như các bạn có thể thấy, chúng ta luôn luôn phải cần ít nhất 2 đoạn code trên với Nguồn và Đích để có thể tạo hiệu ứng. Các bạn hoàn toàn có thể đặt vị trí 2 đoạn code trên ở bất kì chỗ nào trong tổng thể code của các bạn.

Giải thích:

 - Đặc điểm của style 1 là ít jquery, nhưng khi click nó sẽ thêm đuôi #tên_phần_tử vào đuôi link, nếu người dùng soi kĩ sẽ thấy
 - Đặc điểm của style 2 là dùng nhiều jquery, nhưng khi click sẽ không thêm đuôi #tên_phần_tử vào đuôi link.

Lời kết

Rất đơn giản thôi, bạn hoàn toàn đã có thể tạo ra hiệu ứng cuộn mượt mà cho nhiều vị trí trong website/blog rồi đấy. Chúc các bạn thành công. Đừng quên để lại bình luận nhé.