jQuery实现简单而且很酷的返回顶部链接效果

川长思鸟来 2022-08-06 02:04 188阅读 0赞

demo：

**html部分：**

<!doctype html> 
<html> 
 
<head> 
    <meta charset="utf-8"> 
    <meta name="description" content=""> 
    <meta name="keywords" content=""> 
    <title>返回页面顶部</title> 
   <link rel="stylesheet" type="text/css" href="css/style.css"> 
    <script type="text/javascript" src="../jquery/js/jquery-1.7.2.min.js"></script> 
</head> 
 
<body> 
 
    1 
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    2 
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    3 
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    4 
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    5 
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    <div id="back\_to\_top"> 
        <a href="\#"> 
            <div>返回顶部</div> 
            <div>广告或图片部分</div> 
        </a> 
 
    </div> 
    <script type="text/javascript" src="js/returntop.js"> 
    </script> 
</body> 
</html>

**css样式：**

\#back\_to\_top \{  
            position: fixed;  
            bottom: 100px;  
            right: 0px;  
            width: 100px;  
            height: 100px;  
            background: \#ccc;  
            -moz-transition: background 1s;/\*鼠标经过颜色渐变效果\*/  
            -webkit-transition: background 1s;  
            -o-transition: background 1s  
        \}  
        \#back\_to\_top:hover \{  
            background: \#aaa;  
        \}

**js文件：**

$(document).ready(function () \{  
    $("\#back\_to\_top").hide();//首先将\#back-to-top隐藏  
    $(function () \{  
        $(window).scroll(function () \{  
            if ($(window).scrollTop() > 100) \{//当滚动条的位置处于距顶部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;  
        \});  
    \});  
\});

**也可以在添加锚点链接**

<div id="back\_to\_top"> 
        <a href="\#top"> 
            <div>返回顶部</div> 
            <div>广告或图片部分</div> 
        </a> 
 
    </div>

文章部分来自（[飞鱼的声纳][Link 1]）

[Link 1]: http://startwmlife.com/using-jquery-to-create-humane-back-to-top-links/