| Article Introduction: use jquery to create a humanized return to the top link. |
Previously written about creating a human-oriented return to the top link to discuss what features to return to the top link need to be able to be called humanization. I've always felt that the return top connection in the visual area is a little more perfect, but because it's unfamiliar to JavaScript, you never know how to do it technically, you can only use other people's JavaScript code. I've been learning jquery for a while, and found its practical jquery to write very simple, so in this article I'll explain how to create a simple and cool return to the top link effect, let's start.
jquery back to Top ( See sample )
First, HTML (basic structure)
<body id="top">
<p id="back-to-top"><a href="#top"><span></span>返回顶部</a></p>
</body>
With the above HTML, when we click on the "Back to the top" link, it will automatically jump to the body label position, that is, the top of the page.
Second, CSS (style)
The reason for this is to add an empty < span> tag to the < a> tag of the HTML code above to create what we expected to return the top link style, as shown in the following figure:
Next we need to use the Position:fixed property to pin the jump link to the page so that it can stay in sight at any time. The following are all CSS code:
p#back-to-top{
position:fixed;
bottom:100px;
left:80px;
}
P#back-to-top a{
Text-align:center;
Text-decoration:none;
Color: #d1d1d1;
Display:block;
width:80px;
/* Use the Transition property in CSS3 to add a gradient effect to the text in the Jump link.
-moz-transition:color 1s;
-webkit-transition:color 1s;
-o-transition:color 1s;
}
P#back-to-top a:hover{
Color: #979797;
}
P#back-to-top a span{
Background: #d1d1d1 URL (images/arrow-up.png) no-repeat Center Center;
border-radius:6px;
Display:block;
height:80px;
width:80px;
margin-bottom:5px;
/* Use the Transition property in CSS3 to add a gradient effect to the <span> label background color * *
-moz-transition:background 1s;
-webkit-transition:background 1s;
-o-transition:background 1s;
}
#back-to-top a:hover span{
Background: #979797 URL (images/arrow-up.png) no-repeat Center Center;
}
Three, jQuery (dynamic effect)
The effect of using jquery is that when the page is first loaded and the browser scroll bar is at the top, the jump link is hidden. When the scroll bar is scrolled down, the jump link gradually shows up, and when you click the Jump link, the page scrolls to the top and the jump links fade away. Here's the jquery code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js">
<script type="text/javascript">
$(document).ready(function(){//首先将#back-to-top隐藏
$("#back-to-top").hide();
//当滚动条的位置处于距顶部100像素以下时，跳转链接出现，否则消失
$(function () {
$(window).scroll(function(){
if ($(window).scrollTop()>100){
$("#back-to-top").fadeIn(1500);
}
else
{
$("#back-to-top").fadeOut(1500);
}
});//当点击跳转链接后，回到页面顶部位置
$("#back-to-top").click(function(){
$("body,html").animate({scrollTop:0},1000);
return false;
});
});
});
</script>
Iv. compatibility
Here we add the id= "#top" to the body tag to achieve the top effect when the browser does not support JavaScript. In fact, jquery allows the scroll bar to be positioned anywhere, so here we keep the browser compatible.
(Source: The sonar of Flying fish )
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
