Smooth Scrolling "Back To Top" Button cho Blogger

 Việc di chuyển trong các Website hoặc Blogger thường ta dùng chuột cuốn thanh cuộn, hoặc dùng các nút nhấn mũi tên trên thanh Scroll bar ở biên phải ứng dụng. Tuy nhiên, thiết kế ứng dụng còn cho phép chúng ta có thể tạo ra các đối tượng button thực thế, nhìn vào là hiếu ngay cho từng động thái Click chuột. Việc thiết kế nó chẳng mấy khó khăn, hoàn tất đúng thao tác, bạn sẽ có được một Blogspot đẹp hơn, tiện ích hữu dụng hơn.

Các bước tạo Scroll to Top button:

1. Mỡ Account của Blogger > Bố cục
2. Click vào  Thêm tiện ích, chọn Widget HTML/JavaScript
3. Chép Source dưới đây dán vào trong khung soạn thảo Code:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" >
/***********************************************
* Scroll To Top Control script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Modified by www.MyBloggerTricks.com
* This notice MUST stay intact for legal use
* Visit Project Page at http://www.dynamicdrive.com for full source code
***********************************************/
var scrolltotop={
    //startline: Integer. Number of pixels from top of doc scrollbar is scrolled before showing control

   //scrollto: Keyword (Integer, or "Scroll_to_Element_ID"). How far to scroll document up when control is clicked on (0=top).
    setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},
    controlHTML: '<img src="IMAGE LINK" />', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol"
    controlattrs: {offsetx:5, offsety:5}, //offset of control relative to right/ bottom of window corner
    anchorkeyword: '#top', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" links
    state: {isvisible:false, shouldvisible:false},
    scrollup:function(){
        if (!this.cssfixedsupport) //if control is positioned using JavaScript
            this.$control.css({opacity:0}) //hide control immediately after clicking it
        var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto)
        if (typeof dest=="string" && jQuery('#'+dest).length==1) //check element set by string exists
            dest=jQuery('#'+dest).offset().top
        else
            dest=0
        this.$body.animate({scrollTop: dest}, this.setting.scrollduration);
    },
    keepfixed:function(){
        var $window=jQuery(window)
        var controlx=$window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetx
        var controly=$window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsety
        this.$control.css({left:controlx+'px', top:controly+'px'})
    },
    togglecontrol:function(){
        var scrolltop=jQuery(window).scrollTop()
        if (!this.cssfixedsupport)
            this.keepfixed()
        this.state.shouldvisible=(scrolltop>=this.setting.startline)? true : false
        if (this.state.shouldvisible && !this.state.isvisible){
            this.$control.stop().animate({opacity:1}, this.setting.fadeduration[0])
            this.state.isvisible=true
        }
        else if (this.state.shouldvisible==false && this.state.isvisible){
            this.$control.stop().animate({opacity:0}, this.setting.fadeduration[1])
            this.state.isvisible=false
        }
    },
   
    init:function(){
        jQuery(document).ready(function($){
            var mainobj=scrolltotop
            var iebrws=document.all
            mainobj.cssfixedsupport=!iebrws || iebrws && document.compatMode=="CSS1Compat" && window.XMLHttpRequest //not IE or IE7+ browsers in standards mode
            mainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body')
            mainobj.$control=$('<div id="topcontrol">'+mainobj.controlHTML+'</div>')
                .css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', bottom:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx, opacity:0, cursor:'pointer'})
                .attr({title:'Scroll Back to Top'})
                .click(function(){mainobj.scrollup(); return false})
                .appendTo('body')
            if (document.all && !window.XMLHttpRequest && mainobj.$control.text()!='') //loose check for IE6 and below, plus whether control contains any text
                mainobj.$control.css({width:mainobj.$control.width()}) //IE6- seems to require an explicit width on a DIV containing text
            mainobj.togglecontrol()
            $('a[href="' + mainobj.anchorkeyword +'"]').click(function(){
                mainobj.scrollup()
                return false
            })
            $(window).bind('scroll resize', function(e){
                mainobj.togglecontrol()
            })
        })
    }
}
scrolltotop.init()
</script>

Thay thế  IMAGE LINK bằng địa chỉ Url  của các back to top button. Bạn có thể Download Source code các nút button từ trong thư viện miễn phí . Download Back to top/bottom buttons. Bạn cũng có thể dùng địa chỉ Url của các button dưới đây cũng được:

 Url của các button có thể dùng:

src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwOzEDV6K_ZPiiw-jYM4Qr4rt4z-wydzdp0SMcO7To6ABr9Lch3RIrafiEVIydsF9by7xwIce1rgM6IV-Y3Uuz6H_KXi9K9h5vPNGkEjL1IHgoNcPWWaULqO5AX7DYgRt9-wzaKRNtFJY/?imgmax=800" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKB0XcCzm-thyphenhyphenYjgxna3Ni4s-GFk9h4eSToEUJ65McQh5gl7qOxClxq1nLOQ91_-Su_EIshks1LOyNRElTPA44c791sSXY85i8mL7IGZ28DaZKg4aSKEaoUGOLEn03jLz4mSW3gZTO85M/?imgmax=800"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXOUcOMLZo7csfU3R_twOFE2jFyzBZ11vFvmb65MzgOzWeqcNA7fNPaAqQY9fMtYSyYF7cBcV56U8Rs5NKmfDZRwGS36PGljjBgQRLa6bRsab5gda9zH1fq-3MubCuNSmt6YzjgrEwFrc/?imgmax=800"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZ-RtNRnEE4vujRcY8f9r6PdfmppD7PPXkTyQVBAQgQBtOBPBYvoAMF6-Xjf53PHOZbHy1k0rNDlTz88Yz7cLAxDFXG1701eeu10ojq5B9LyP8WUaI23CGLglU7kTF-lZ7Qnntp6RG4-o/?imgmax=800


     4.   Save lưu lại HTML/JavaScrip và đặt để nó ở dưới footer, chân trang là tốt nhất..
      5.  Cho ứng dụng hoạt động thử. Chúc các bạn thành công.

Nguồn tham khảo My Blogger Tricks

Socializer Widget by Nguyen D. Khanh

SOCIALIZE IT →

Tweet

FOLLOW US →

SHARE IT →

Các bạn có thể tham khảo thêm nhiều kiến thức từ các bài viết mà mình đã SEO bằng các Từ khóa bên dưới bài đăng nầy để tìm hiểu thêm về các khái niệm và ứng dụng có liên quan nhé..