Tạo nút bấm nhảy xuống cuối trang, lên đầu trang (back to top - bottom)

Để tiện cho việc người khác lướt blog(web) của mình, các bạn có thể tạo các nút nhảy lên đầu trang, nhảy xuống cuối trang , hoặc nhảy vào giữa trang. Bài viết này mình sẽ hướng dẫn các bạn thực hiển nó. Để cho sinh động, ta nên tạo nút bằng hình ảnh.Lần trước mình đã giới thiệu cho các bạn cách tạo nút Back To Top đơn giản và jQuery, hôm nay mình giới thiệu cách mới.

Đầu tiên bạn phải có 3 tấm hình (nhỏ thôi, tầm 30x30 px), dùng để tạo 3 button : lên, xuống, và giữa.

Các bạn Xem demo ngay tại bài viết này nha. (góc dưới màn hình bên phải đó)

Ảnh minh họa:

☼ Cách tiến hành:   1- Đăng nhập vào Blog

   2- Vào thiết kế   3- Chọn Phầnt ử trang.   4- Chọn Thêm tiện ích => Chọn HTML/Javarscip và dán đoạn code bên dưới vào trước thẻ ]]></b:skin>.

    #top-buttom_image {

    position:fixed;

    _position:absolute;

    bottom:5px;     right:5px;    right:5px;    clip:inherit;

    _top:expression(document.documentElement.scrollTop+

    document.documentElement.clientHeight-this.clientHeight);

    _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth);

}

-Trong đó:

• bottom:5px; là vị trí ảnh tính từ phía chân màn hình tính lên. Nếu muốn tính từ trên đầu thì thay bottom thành top

• right:5px; : Là vị trí của ảnh so với lề phải. Bạn có thể thay right thành left

   5- Chèn đọan code sau vào trước thẻ đóng </body><script type='text/javascript'>
    var maxWidth = (document.body.clientWidth);
    var maxHeight = (document.body.clientHeight);
    </script>
    <div id='top-buttom_image'>

  <a href='javascript:top.window.scrollTo(0,0)' title='Lên đầu
trang'><img alt='Lên đầu trang' border='2' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAvdjsh_O1JuIZ9TDfOrxiNIPyrfj6aOnjVu3-pIbHHv2d3gRgB59AYO_r143TAoaFhKcLaHZ2CtWGOdcBlYUUT6auZUCMMerGLRFCr8lN18lTmoJP_zdIwr00cxAfNzwXcabZHhh_OoY/s1600/top-namkna-blogspot-com.gif'/></a><br/>
    <a
href='javascript:window.scrollTo(maxWidth,maxHeight/2)' title='Vào giữa
trang'><img alt='Vào giữa trang' border='2' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhViXAtqfhk9hVegOAZS70X3BRllpaRAcZT2pfsf1G3CTNwPNau1KRjYBynLF1MR_IT_z5BZqr51IUWjSdnDvfAhFeu9697AOS-UUrz8pZURILQ9hwnmUGMe7buTMiU7XLB6rG_dGBhgGg/s1600/play-pause-namkna-blogspot-com.gif'/></a><br/>
    <a
href='javascript:window.scrollTo(maxWidth,maxHeight)' title='Xuống cuối
trang'><img alt='Xuống cuối trang' border='2' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXzrgi6bTsQt9EvNiQ6YsLsNPmkGtyP_4GjUKgJu5g7P6qAKX2Jg9wzi-p4W_yUOuZjsfN8r276h0Wq8G6zjsuJddmEL6za8_mB1oaB6HRTuiz-KGQit_3LSSg6_0pBBQv5IbB8In88ag/s1600/bottom-namkna-blogspot-com.gif'/></a>
    </div>
Thay link ảnh bằng link ảnh của các button Các bạn VÀO ĐÂY để kiếm thêm một số hình mũi tên, thích cái nào thì tải về upload lên, rồi lấy link hình thay vào
   5- Sau đó bấm Lưu Mẫu lại.

Một số link ảnh
Chúc bạn thành công!