Code nút "Back to Top" đẹp sử dụng jQuery cho trang web

Ngày Thứ Tư, 31 tháng 10, 2012 Blog của Báo Mới Hà Nội chia sẻ với bạn đọc bài viết Code nút "Back to Top" đẹp sử dụng jQuery cho trang web
Chúc bạn xem tin tức vui vẻ !!

Để tạo điều kiện thuận lợi cho khách tham quan khi đọc xong bài có thể quay về đầu trang nhanh chóng đặc biệt với những trang web có phần nội dung khá dài, bạn phải tạo cho trang web một nút bấm phía dưới cuối trang, khi bấm vào nút này lập tức sẽ đưa khách "về đầu trang" giúp người đọc tiết kiệm thời gian khi phải rê chuột lên trên cùng của trang. Trong bài viết này,BachKhoamedia cung cấp cho bạn đoạn code tạo nút "Back to top" hỗ trợ chức năng trên,đặc biệt có sử dụng hiệu ứng trượt từ jQuery rất đẹp mắt và ẩn đi khi bạn đang ở đầu trang( khi mà bạn không cần dùng tới nó :D). 
Xem demo trên trang chủ Bachkhoamedia

Các bạn làm theo các bước sau :

1. Đăng nhập Blogger > Layout ( Bố cục)
2. Chọn Add a gadget(Thêm phần tử mới)
3. Chọn HTML/JavaScript
4. Thêm đoạn code sau vào ô HTML/JavaScript

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript" >

/*********************************************** 

***********************************************/

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="https://lh3.googleusercontent.com/-2rZeDVpenHM/T860SMKImAI/AAAAAAAAAv8/canD9JoxLec/s128/005017-blue-white-pearl-icon-arrows-arrow2-upload.png" />', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol" 

    controlattrs: {offsetx:5, offsety:5}, //offset of control relative to left/ 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, left: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>

5.Lưu lại và xem kết quả

Chú ý : 

• Mặc định của mẫu code này là cho nút back to top về bên trái,nếu bạn muốn đưa về bên phải thì các bạn thay tất cả từ "left" trong đoạn code (được tô màu xanh) trên thành "right"
• Nếu không thích mẫu này,các bạn có thể upload ảnh nút Back to top của các bạn lên host sau đó lấy link ảnh đè vào dòng link mà bachkhoamedia đã tô đỏ ở đoạn code trên.Một số mẫu Back to top khác cho các bạn.

Chúc các bạn thành công !

Bachkhoamedia

Nguồn : Mẹo vặt cuộc sống