GagakTekno

Cara Membuat Smooth Scroll Blog

Smooth Scroll ini berbeda dengan yang ada back to top akan tetapi fungsinya masih sama tapi untuk yang ini hanya Smooth Scroll biasa yang dipakai oleh scroll mouse jadi kalau sobat melakukan scroll dengan mouse maka scroll tersebut akan terasa sangat smooth seperti dengan menggunakan back to top.

Sebenarnya sobat bisa menggunakan smooth scroll back to top agar lebih mempermudah saja tapi bila ingin menggunakan yang smooth dengan cara manual yaitu melalui scroll mouse sobat bisa gunakan cara ini, cara ini terbilang mudah karena hanya menggunakan jQuery saja tanpa perlu css jika sobat sudah melihat post ini dan melakukan scroll pasti terasa smooth untuk blog ini nah itulah yang dinamakan smooth scroll.

Cara Membuat Smooth Scroll Blog


  1. Masuk ke Dashboard blog kamu blogger.com
  2. Silahkan Klik Template/Tema cari kode </body> or </head> lalu copy kode jQuery dibawah ini
  3. // SmoothScroll
    !function(){function e(){var e=!1;e&amp;&amp;c("keydown",r),v.keyboardSupport&amp;&amp;!e&amp;&amp;u("keydown",r)}function t(){if(document.body){var t=document.body,o=document.documentElement,n=window.innerHeight,r=t.scrollHeight;if(S=document.compatMode.indexOf("CSS")&gt;=0?o:t,w=t,e(),x=!0,top!=self)y=!0;else if(r&gt;n&amp;&amp;(t.offsetHeight&lt;=n||o.offsetHeight&lt;=n)){var a=!1,i=function(){a||o.scrollHeight==document.height||(a=!0,setTimeout(function(){o.style.height=document.height+"px",a=!1},500))};if(o.style.height="auto",setTimeout(i,10),S.offsetHeight&lt;=n){var l=document.createElement("div");l.style.clear="both",t.appendChild(l)}}v.fixedBackground||b||(t.style.backgroundAttachment="scroll",o.style.backgroundAttachment="scroll")}}function o(e,t,o,n){if(n||(n=1e3),d(t,o),1!=v.accelerationMax){var r=+new Date,a=r-C;if(a<v .accelerationdelta="" i="(1+30/a)/2;i" var="">1&amp;&amp;(i=Math.min(i,v.accelerationMax),t*=i,o*=i)}C=+new Date}if(M.push({x:t,y:o,lastX:0&gt;t?.99:-.99,lastY:0&gt;o?.99:-.99,start:+new Date}),!T){var l=e===document.body,u=function(){for(var r=+new Date,a=0,i=0,c=0;c<m .length="" c="" s="M[c],d=r-s.start,f=d" var="">=v.animationTime,h=f?1:d/v.animationTime;v.pulseAlgorithm&amp;&amp;(h=p(h));var m=s.x*h-s.lastX&gt;&gt;0,w=s.y*h-s.lastY&gt;&gt;0;a+=m,i+=w,s.lastX+=m,s.lastY+=w,f&amp;&amp;(M.splice(c,1),c--)}l?window.scrollBy(a,i):(a&amp;&amp;(e.scrollLeft+=a),i&amp;&amp;(e.scrollTop+=i)),t||o||(M=[]),M.length?E(u,e,n/v.frameRate+1):T=!1};E(u,e,0),T=!0}}function n(e){x||t();var n=e.target,r=l(n);if(!r||e.defaultPrevented||s(w,"embed")||s(n,"embed")&amp;&amp;/\.pdf/i.test(n.src))return!0;var a=e.wheelDeltaX||0,i=e.wheelDeltaY||0;return a||i||(i=e.wheelDelta||0),!v.touchpadSupport&amp;&amp;f(i)?!0:(Math.abs(a)&gt;1.2&amp;&amp;(a*=v.stepSize/120),Math.abs(i)&gt;1.2&amp;&amp;(i*=v.stepSize/120),o(r,-a,-i),void e.preventDefault())}function r(e){var t=e.target,n=e.ctrlKey||e.altKey||e.metaKey||e.shiftKey&amp;&amp;e.keyCode!==H.spacebar;if(/input|textarea|select|embed/i.test(t.nodeName)||t.isContentEditable||e.defaultPrevented||n)return!0;if(s(t,"button")&amp;&amp;e.keyCode===H.spacebar)return!0;var r,a=0,i=0,u=l(w),c=u.clientHeight;switch(u==document.body&amp;&amp;(c=window.innerHeight),e.keyCode){case H.up:i=-v.arrowScroll;break;case H.down:i=v.arrowScroll;break;case H.spacebar:r=e.shiftKey?1:-1,i=-r*c*.9;break;case H.pageup:i=.9*-c;break;case H.pagedown:i=.9*c;break;case H.home:i=-u.scrollTop;break;case H.end:var d=u.scrollHeight-u.scrollTop-c;i=d&gt;0?d+10:0;break;case H.left:a=-v.arrowScroll;break;case H.right:a=v.arrowScroll;break;default:return!0}o(u,a,i),e.preventDefault()}function a(e){w=e.target}function i(e,t){for(var o=e.length;o--;)z[N(e[o])]=t;return t}function l(e){var t=[],o=S.scrollHeight;do{var n=z[N(e)];if(n)return i(t,n);if(t.push(e),o===e.scrollHeight){if(!y||S.clientHeight+10<o auto="" c="" d="" document.body="" e.clientheight="" e.nodename="" e.scrollheight="" e="e" else="" function="" getpropertyvalue="" i="" if="" o="" overflow-y="" overflow="" return="" s="" scroll="" t.tolowercase="" t="" tolowercase="" u="" while="" window.addeventlistener="" window.removeeventlistener="">0?1:-1,t=t&gt;0?1:-1,(k.x!==e||k.y!==t)&amp;&amp;(k.x=e,k.y=t,M=[],C=0)}function f(e){if(e){e=Math.abs(e),D.push(e),D.shift(),clearTimeout(A);var t=D[0]==D[1]&amp;&amp;D[1]==D[2],o=h(D[0],120)&amp;&amp;h(D[1],120)&amp;&amp;h(D[2],120);return!(t||o)}}function h(e,t){return Math.floor(e/t)==e/t}function m(e){var t,o,n;return e*=v.pulseScale,1&gt;e?t=e-(1-Math.exp(-e)):(o=Math.exp(-1),e-=1,n=1-Math.exp(-e),t=o+n*(1-o)),t*v.pulseNormalize}function p(e){return e&gt;=1?1:0&gt;=e?0:(1==v.pulseNormalize&amp;&amp;(v.pulseNormalize/=m(1)),m(e))}var w,g={frameRate:150,animationTime:800,stepSize:120,pulseAlgorithm:!0,pulseScale:8,pulseNormalize:1,accelerationDelta:20,accelerationMax:1,keyboardSupport:!0,arrowScroll:50,touchpadSupport:!0,fixedBackground:!0,excluded:""},v=g,b=!1,y=!1,k={x:0,y:0},x=!1,S=document.documentElement,D=[120,120,120],H={left:37,up:38,right:39,down:40,spacebar:32,pageup:33,pagedown:34,end:35,home:36},v=g,M=[],T=!1,C=+new Date,z={};setInterval(function(){z={}},1e4);var A,N=function(){var e=0;return function(t){return t.uniqueID||(t.uniqueID=e++)}}(),E=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||function(e,t,o){window.setTimeout(e,o||1e3/60)}}(),K=/chrome/i.test(window.navigator.userAgent),L="onmousewheel"in document;L&amp;&amp;K&amp;&amp;(u("mousedown",a),u("mousewheel",n),u("load",t))}();</o></m></v>
  4. Simpan kode css tersebut diatas kode </body> or </head>
  5. Simpan Template/Tema
  6. Selesai

Comment Policy : Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
BERI KOMENTAR