STDIO
Tìm kiếm gần đây
    • Nội dung
    • QR Code
    • 0
    • 0
    • Sao chép

    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>
    0 Bình luận
    JavaScript

    JavaScript

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

    Đề xuất

    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.
    21 Ngày Bắt Đầu với Dropshipping
    Dành ra 21 ngày để bắt đầu làm dropshipping hiệu quả.

    Khám phá

    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 ...
    29/05/2014
    SPA - Single Page Application Là Gì?
    Bài viết giới thiệu về SPA - Single Page Application, sự so sánh giữa mô ...
    Hiện Thực Menu Select Level với Scroll Rect
    Hiện thực level select với thành phần Scroll Rect trong Unity.
    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 ...
    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 ...
    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 ...
    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 ...
    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 ...
    Khi bạn nhấn vào liên kết sản phẩm do STDIO đề xuất và mua hàng, STDIO có thể nhận được hoa hồng. Điều này hỗ trợ STDIO tạo thêm nhiều nội dung hữu ích.. Tìm hiểu thêm.
    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