Thanh điều khiển cuộn trang cho blog (cải biên)

Nguồn: @ NASS

Đây là bài viết đầu tiên sau 2 tháng "nghỉ phép" của mình. Và bài viết này mình xin giới thiệu thủ thuật "Thanh điều khiển cuộn trang cho blog" từ blog của Duy Phạm, qua code thủ thuật này mình sẽ tặng thêm cho độc giả của mình một bộ các nút bấm khác. Nhưng trước hết mình xin đưa nguyên code thủ thuật của tác giả vào đã

Thêm đoạn mã sau vào trước thẻ </body> trong template

<style>

#dp-scroll{position:fixed;z-index:9999;bottom:0;right:0}

#dp-scroll a{display:block;float:left;background-color:#5cd4f5;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSM-14WjaIQsFTKxNGDWP2WeRJmoD6_om1suvuVf8Q4Fz0kZ0JgGcVvM1Be2fXwnCOwmR1cE-5Wu1pWUUvsTy6EEbagaq7STtpZCia-Ck2OhJP0qCEm-bFFj7qpvntHuQg1FLfzji369A/s216/scroll.png);width:36px;height:36px;text-indent:-999em}

#dp-scroll a.dp-up{background-position:0 -36px}

#dp-scroll a.dp-down{background-position:0 -72px}

#dp-scroll a.dp-bottom{background-position:0 -108px}

#dp-scroll a.dp-scroll{background-position:0 -144px}

#dp-scroll a.dp-stop{background-position:0 -180px}

#dp-scroll a:hover{background-color:#5cbbf5}

</style>

<script>

function autoScroll(){window.scrollBy(0,1);scrolldelay=setTimeout('autoScroll()',50 )}

function stopScroll(){clearTimeout(scrolldelay)}

</script>

<div id='dp-scroll'>

<a class='dp-top' href='javascript:window.scrollTo(0,0);' rel='nofollow' title='To Top'>To Top</a>

<a class='dp-up' href='javascript:window.scrollBy(0,-window.innerHeight);' rel='nofollow' title='Page Up'>Page Up</a>

<a class='dp-down' href='javascript:window.scrollBy(0,window.innerHeight);' rel='nofollow' title='Page Down'>Page Down</a>

<a class='dp-bottom' href='javascript:window.scrollTo(0,999999);' rel='nofollow' title='To Bottom'>To Bottom</a>

<a class='dp-scroll' href='javascript:autoScroll();' rel='nofollow' title='Auto Scroll'>Auto Scroll</a>

<a class='dp-stop' href='javascript:stopScroll();' rel='nofollow' title='Stop Scroll'>Stop Scroll</a>

</div>

Và đây là bộ nút bấm của mình tặng riêng cho độc giả của TrollVL, tất nhiên cũng dựa trên code của bạn Duy Phạm nhé. Tại sao mình phải nhấn mạnh là của bạn Duy Phạm? Bởi vì nếu có bạn nào đó muốn đem bài viết này về blog của mình xin bạn để nguồn là Duy Phạm

<style>

#dp-scroll{position:fixed;z-index:9999;bottom:0;right:0}

#dp-scroll a{display:block;float:left;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0jloLqqTNfEnfYGRLyETzlsahhsQlbSQV-KzVFsS71iEROb1waNElcPvIk00oN7VuC5Z3Mbi8t7IAvkAy4p6FsBGB1xmn6cRTOH94SWrVrpkBCMgyMHsTVxv35-VL71_mHltQOG4wCSWC/s1600/scroll2.png);width:36px;height:36px;text-indent:-999em}

#dp-scroll a:hover.dp-top{background-position:35px 0px}

#dp-scroll a.dp-up{background-position:0 -36px}

#dp-scroll a:hover.dp-up{background-position:35px -36px}

#dp-scroll a.dp-down{background-position:0 -72px}

#dp-scroll a:hover.dp-down{background-position:35px -72px}

#dp-scroll a.dp-bottom{background-position:0 -108px}

#dp-scroll a:hover.dp-bottom{background-position:35px -108px}

#dp-scroll a.dp-scroll{background-position:0 -144px}

#dp-scroll a:hover.dp-scroll{background-position:35px -144px}

#dp-scroll a.dp-stop{background-position:0 -180px}

#dp-scroll a:hover.dp-stop{background-position:35px -180px}

</style>

<script>

function autoScroll(){window.scrollBy(0,1);scrolldelay=setTimeout('autoScroll()',50 )}

function stopScroll(){clearTimeout(scrolldelay)}

</script>

<div id='dp-scroll'>

<a class='dp-top' href='javascript:window.scrollTo(0,0);' rel='nofollow' title='To Top'>To Top</a>

<a class='dp-up' href='javascript:window.scrollBy(0,-window.innerHeight);' rel='nofollow' title='Page Up'>Page Up</a>

<a class='dp-down' href='javascript:window.scrollBy(0,window.innerHeight);' rel='nofollow' title='Page Down'>Page Down</a>

<a class='dp-bottom' href='javascript:window.scrollTo(0,999999);' rel='nofollow' title='To Bottom'>To Bottom</a>

<a class='dp-scroll' href='javascript:autoScroll();' rel='nofollow' title='Auto Scroll'>Auto Scroll</a>

<a class='dp-stop' href='javascript:stopScroll();' rel='nofollow' title='Stop Scroll'>Stop Scroll</a>

</div>

Tăng hoặc giảm giá trị 50 để tăng/giảm tốc độ cuộn trang



Đăng ký: Viet Blogs

Nguồn tin