STDIO
Tìm kiếm gần đây
    • 0

    Scroll To Top Button - Quay Lại Đầu Trang Web

    Scroll to top button là button được sử dụng để cuộn trang về đầu 1 cách nhanh chóng, tạo nên tiện ích cho người dùng.
    01/09/2015
    11/09/2020
    2 phút đọc
    Scroll To Top Button - Quay Lại Đầu Trang Web

    Scroll to top button

    Demo được viết trên một trang html, sử dụng thư viện Font AwesomejQuery. Có thể chia thành 3 phần như sau để tiện hình dung công việc:

    • Tạo button.
    • Tạo CSS cho button.
    • Tạo sự kiện click.

    Tạo button

    <div
    class="button_scroll2top"
    onclick="page_scroll2top()"
    >
    <i class="fa fa-chevron-up"/>
    </div>

    Hình dạng sơ khai của button:

    ss_1

    Định nghĩa class button_scroll2top và function page_scroll2top() như sau:

    Tạo CSS cho button

    <style type="text/css">
    	.button_scroll2top
    	{
    		display:none;
    		width:80px;
    		height:70px;
    		padding-top:20px;
    		padding-left:10px;
    		position:fixed;
    		z-index:999;
    		right:-45px;
    		top:45%;
    		background:#fb3;
    		border-radius:999px;
    		cursor:pointer;
    		opacity:0.6;
    		color:#fff;
    		font-size:2.0em;
    	}
    
    	.button_scroll2top:hover
    	{
    		opacity:1.0;
    	}
    </style>
    ss_2

    Dòng display: none có chức năng ẩn button đi khi người dùng chưa scroll xuống. Ở đây dùng opacity: 0.6 để làm mờ button và hiện rõ phần nội dung bên dưới button (nếu có), nhằm tránh gây khó chịu cho người dùng khi họ sử dụng những thiết bị có màn hình nhỏ.

    Tạo sự kiện click

    <script type="text/javascript">
    	$(window).scroll(function(){
    		if($(window).scrollTop() >= 10) {
    			$('.button_scroll2top').show();
    		} else {
    			$('.button_scroll2top').hide();
    		}
    	});
    	function page_scroll2top(){
    		$('html,body').animate({
    			scrollTop: 0
    	    }, 'fast');
    	}
    </script>

    Hàm $(window).scroll() bắt sự kiện scroll của trang web sau đó $(window).scrollTop() sẽ trả về khoảng cách giữa đầu trang và vị trí hiện tại mà bạn đã scroll tới. Nếu khoảng cách này lớn hơn hoặc bằng 10 thì thẻ div được gắn class .button_scroll2top sẽ được hiển thị.

    Hàm page_scroll2top() dùng để quay trở về top của web browser bằng cách set khoảng cách scroll bằng 0.

    Code hoàn chỉnh

    <!DOCTYPE html>
    <html>
    <head>
    	<title>Demo Back to top button</title>
    	<link rel="stylesheet" href="font-awesome-4.4.0/css/font-awesome.min.css">
    	<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
    	<style type="text/css">
    	    .button_scroll2top
    	    {
    	        display:none;
    	        width:80px;
    	        height:70px;
    	        padding-top:20px;
                    padding-left:10px;
    	        position:fixed;
    	        z-index:999;
    	        right:-45px;
    	        top:45%;
    	        background:#fb3;
    	        border-radius:999px;
    	        cursor:pointer;
    	        opacity:0.6;
    	        color:#fff;
    	        font-size:2.0em;
    	    }
    
    	    .button_scroll2top:hover
    	    {
    	        opacity:1.0;
    	    }
    	</style>
    </head> <body> <p>This is content</p> <div
    class="button_scroll2top"
    onclick="page_scroll2top("
    >
    <i class="fa fa-chevron-up"/>
    </div> </body> <script type="text/javascript"> $(window).scroll(function(){ if($(window).scrollTop() >= 10) { $('.button_scroll2top').show(); } else { $('.button_scroll2top').hide(); } }); function page_scroll2top(){ $('html,body').animate({ scrollTop: 0 }, 'fast'); } </script> </html>
    JavaScript

    JavaScript

    STDIO Training - Đào tạo lập trình Frontend - Backend.

    Sản phẩm

    Đề xuất

    HTML - Phần 0: Trang Web Đầu Tiên

    HTML - Phần 0: Trang Web Đầu Tiên

    Hướng dẫn từng bước đầu tiên tạo trang web với HTML.

    HTML Cheat SheetCăn bản

    19/08/2015

    21 Ngày Bắt Đầu với Dropshipping

    21 Ngày Bắt Đầu với Dropshipping

    Dành ra 21 ngày để bắt đầu làm dropshipping hiệu quả.

    Affiliate MarketingKiến thức chung

    12/09/2020

    Khám phá thêm

    Sử Dụng CSS Image Sprites Tối Ưu Tải Trang

    Sử Dụng CSS Image Sprites Tối Ưu Tải Trang

    Tối ưu quá trình load một trang web với CSS-Sprite. Các icon, hình ảnh ...

    La Kiến Vinh

    29/05/2014

    Hiện Thực Menu Select Level với Scroll Rect

    Hiện Thực Menu Select Level với Scroll Rect

    Đối với các thể loại game giải đố (puzzle), luôn luôn có một hệ thống ...

    Lập Trình GameKiến Thức Nâng Cao

    08/08/2015

    RequireJS cho Người Mới Bắt Đầu

    RequireJS cho Người Mới Bắt Đầu

    Khái niệm, chức năng, cách module hoá JavaScript, cách tạo module với ...

    JavaScriptJavaScript Nâng Cao

    04/11/2017

    Bắt Đầu với Affiliate Marketing Như Thế Nào?

    Bắt Đầu với Affiliate Marketing Như Thế Nào?

    Hướng dẫn 7 bước đơn giản bắt đầu với Affiliate Marketing (tiếp thị liên ...

    Affiliate MarketingKiến thức chung

    11/09/2020

    Học SEO Trong 1 Ngày - Phần 4 (Hết)

    Học SEO Trong 1 Ngày - Phần 4 (Hết)

    SEO nâng cao với cấu trúc web, các vấn đề về robots.txt, nofollow, liên ...

    STDIO SolutionsSEO

    11/07/2020

    Tạo Menu Trượt Theo Khung Nhìn Trên Web

    Tạo Menu Trượt Theo Khung Nhìn Trên Web

    Tạo menu hoặc các phần tử có thể trượt theo thanh trượt của trình duyệt ...

    JavaScriptJavaScript Nâng Cao

    15/07/2014

    Học Lập Trình Nên Bắt Đầu Từ Đâu?

    Học Lập Trình Nên Bắt Đầu Từ Đâu?

    Học lập trình nên bắt đầu từ đâu? Lựa chọn học từ nền tảng có phải luôn ...

    STDIO TrainingGóc nhìn

    30/06/2020

    Các Thẻ - Tag Thông Dụng trong HTML

    Các Thẻ - Tag Thông Dụng trong HTML

    Liệt kê các loại thẻ (tag) thường dùng trong HTML để trình bày 1 trang ...

    HTML Cheat SheetCheat sheet

    18/08/2015

    STDIO
    Trang chính
    Công ty TNHH STDIO

    30, Trịnh Đình Thảo, Hòa Thạnh, Tân Phú, Hồ Chí Minh
    +84 28.36205514 - +84 942.111912
    developer@stdio.vn

    383/1 Quang Trung, Phường 10, Quận Gò Vấp, Hồ Chí Minh
    Số giấy phép ĐKKD: 0311563559 do sở Kế hoạch và Đầu Tư TPHCM cấp ngày 23/02/2012

    ©STDIO, 2013 - 2020