Tạo nút bấm nhảy xuống cuối trang, lên đầu trang

Để 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.

Nhiều trang đã giới thiệu cho các bạn cách tạo nút Back To Top nhưng cách đó có hạn chế là chỉ lên ngay được đầu trang không xuống được cuối trang và giữa trang, do vậy hôm nay mình giới thiệu cách mới cho các bạn khắc phục được các hạn chế đó.

Đầ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ước thực hiện: (ở đây mình giới thiệu cho blogspot)

1. Đăng nhập vào blog -> vào Thiết Kế

2. Vào chỉnh sửa Code HTML

3. Chèn đọan code CSS bên dưới vào trước đọan code  ]]></b:skin>

Code:

#top-buttom_image {

    position:fixed;

    _position:absolute;

    bottom:5px;

    right:5px;

    clip:inherit;

    _top:expression(document.documentElement.scrollTop+

    document.documentElement.clientHeight-this.clientHeight);

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

}

- bottom:5px; , right:5px; : 2 đoạn code này để xác định vị trí hiển thị của các button trên màn hình.

4. 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 &#273;&#7847;u 

trang'><img alt='Lên &#273;&#7847;u trang' border='2' src='http://vahanamokblog.googlecode.com/files/Len%20tren%20dau%20trang.png'/></a><br/>

    <a 

href='javascript:window.scrollTo(maxWidth,maxHeight/2)' title='Vào gi&#7919;a 

trang'><img alt='Vào gi&#7919;a trang' border='2' src='http://vahanamokblog.googlecode.com/files/Vao%20giua%20trang.png'/></a><br/>

    <a 

href='javascript:window.scrollTo(maxWidth,maxHeight)' title='Xu&#7889;ng cu&#7889;i 

trang'><img alt='Xu&#7889;ng cu&#7889;i trang' border='2' src='http://vahanamokblog.googlecode.com/files/Xuong%20cuoi%20trang.png'/></a>

    </div>

Thay link ảnh bằng link ảnh (3 dòng url màu đỏ ở code trên) của các button.

Và đây là kết quả

Nếu bạn không thích các nút này, 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 các link trên là được.

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

Tham khảo từ nguồn http://namkna.blogspot.com