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

2019-11-02 18:27:27

字体：大中小

来源：转载

供稿：网友

要使用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>

上一篇：技术学习进程+第一条博客

下一篇：MapServer获取图例,返回json数据