使用锚链接实现首页面的全屏滚动

最新推荐文章于 2017-11-23 17:22:06 发布

shl999

最新推荐文章于 2017-11-23 17:22:06 发布

阅读量326

点赞数

分类专栏： javascript 文章标签： html 插件

本文链接：https://blog.csdn.net/u014665035/article/details/54944330

版权

javascript 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

要使用jquery.min.js 和jquery.mousewheel.js 这两个插件。

具体html如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用锚链接实现首页面的全屏滚动</title>
    <style>
        *{  padding: 0;  margin: 0;  }
        html,body{  height: 100%;  }
        .first{  height:100%;  background-color: #ccc;  position: relative;  }
        .first .icon {  position: absolute;  bottom: 20px;  right:50px;  }
        .first #content{  position: absolute;  bottom:0;  height:1px;  left: 0;  width: 100%;  }
        .second{  height: 5000px;  background-color: #aaa;  }
    </style>
</head>
<body>
<div class="first"><a href="#content" class="icon">向下</a> <div id="content"></div> </div>
<div class="second"></div>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.mousewheel.js"></script>
<script>
    var fullScroll = {
        ele: {
            scrollEle: $(".first"),
            scrollNextEle: $(".second"),
            aEle: ".first .icon"
        },
        init: function () {
            fullScroll.ele.scrollEle.mousewheel(function (event) {
                if(event.deltaY == -1){
                    $("body").on("click",fullScroll.ele.aEle,function () {
                        var top = $($(this).attr("href")).offset().top;
                        $("html,body").stop().animate({scrollTop:top},1000);
                    });
                    $(fullScroll.ele.aEle).click();
                }
            });
            fullScroll.ele.scrollNextEle.add(fullScroll.ele.scrollEle).mousewheel(function (event) {
                if (event.deltaY == 1) {
                    $("html,body").stop().animate({scrollTop: 0}, 1000)
                }
            });
        }
    };
    fullScroll.init();
</script>
</body>
</html>

shl999

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用锚链接实现首页面的全屏滚动

要使用jquery.min.js 和jquery.mousewheel.js 这两个插件。具体html如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>使用锚链接实现首页面的全屏滚动</title> <style> *{ padding: 0; margin:
复制链接

扫一扫