版权声明：作者支付宝18696232390喜欢的可以打钱！ https://blog.csdn.net/u014131617/article/details/87343967
文章目录
本文参考 ： https://www.xuanfengge.com/skrollr-menu-page-click-on-anchor-plug-in.html
1.skrollr-menu简介
skrollr-menu是一款基于skrollr的hash动画导航插件。
2.引入方法
引入skrollr.js：https://github.com/Prinzhorn/skrollr
引入skrollr.menu.js：https://github.com/Prinzhorn/skrollr-menu
3.Demo
http://www.xuanfengge.com/demo/201508/skrollr-decks/
4.功能
1.animate滚动至某个hash
// 延迟500ms 滚动
setTimeout(function() {
var s = skrollr.init({
forceHeight: false
});
skrollr.menu.init(s, {
change: function(hash, top) {
console.log(hash, top);
}
});
}, 500);
正常hash即可
<a href="#awesome">#awesome</a>
2. 滚动至某hash前150px的位置
<a href="#wambo">150px before #wambo</a>
在正文位置添加data-menu-offset属性
<h1 id="wambo" data-menu-offset="-150">Wambo</h1>
3. 滚动至1000px的位置
在链接添加data-menu-top属性
<a href="#section1" data-menu-top="1000">1000 pixels down</a>
4. 页面滚动75%
在链接添加data-menu-top属性，百分比单位为p
<a href="#awesome" data-menu-top="75p">75% down</a>
5. 设置滚动动画时间
在链接添加data-menu-top属性，值为数值，单位ms无需填写
<a href="#awesome" data-menu-duration="5000">#awesome over 5 seconds</a>
详细参数
var s = skrollr.init();
skrollr.menu.init(s, {
// 使用 `animateTo`
animate: true,
//easing function 动画方法
easing: 'sqrt',
scale: 2,
//动画时间ms
duration: function(currentTop, targetTop) {
// 默认500ms.
return 500;
//或者可以根据当前滚动位置currentTop和目标位置targetTop进行计算
//return Math.abs(currentTop - targetTop) * 10;
},
handleLink: function(link) {
return 400;
},
complexLinks: false,
// 当hash改变时触发
change: function(newHash, newTopPosition) {},
// 是否在滚动时改变hash，默认为true
updateUrl: false
});
Demo代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>skrollr-decks Plugin</title>
<link rel="stylesheet" href="https://necolas.github.io/normalize.css/3.0.1/normalize.css">
<style>
body {
font: bold 1em sans-serif;
}
@media (min-width: 992px) {
body {
font-size: 1.5em;
}
}
a {
color: inherit;
}
.wrapper {
position: relative;
overflow: hidden;
padding-bottom: 20px;
color: #555;
}
.ribbon {
font-size: 1rem;
z-index: 2000;
background-color: #2E2418;
overflow: hidden;
white-space: nowrap;
position: fixed;
right: -50px;
top: 40px;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
box-shadow: 0 0 8px rgba(0, 0, 0, .5);
}
@-webkit-keyframes pulse {
50% {box-shadow: 0 0 10px rgba(0, 0, 0, .2);}
}
@keyframes pulse {
50% {box-shadow: 0 0 10px rgba(0, 0, 0, .2);}
}
.ribbon:hover {
-webkit-animation: pulse .5s infinite;
animation: pulse .5s infinite;
}
.ribbon a {
border: 1px solid #fff;
color: #fff;
display: block;
font: bold .875em 'Helvetica Neue', Helvetica, Arial, sans-serif;
margin: 1px 0;
padding: 10px 50px;
text-align: center;
text-decoration: none;
}
.main-nav {
position: fixed;
z-index: 1000;
background: rgba(230, 180, 120, .9);
width: 100%;
}
.main-nav ul {
list-style: none;
padding: 10px;
margin: 0;
}
.main-nav li {
display: inline-block;
color: #000;
}
.main-nav li a {
display: block;
padding: 5px 2px;
text-decoration: none;
background: rgba(0, 0, 0, .1);
border-radius: 5px;
}
@media (min-width: 992px) {
.main-nav ul {
padding: 20px 40px;
}
}
.skrollr-deck {
position: relative;
box-sizing: border-box;
text-align: center;
z-index: 100;
}
.float-void {
visibility: hidden;
}
.float-deck {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-align: center;
}
.float-deck span,
.skrollr-deck span {
display: block;
color: #fff; font-size: 12em;
position: relative;
top: 50%;
transform: translateY(-50%);
}
</style>
</head>
<body class="skrollr-decks-init" data-skrollr-decks-history="true">
<div class="wrapper">
<div class="ribbon">
<a href="https://github.com/TrySound/skrollr-decks" target="_blank">Star me on GitHub</a>
</div>
<nav class="main-nav">
<ul>
<li><a href="#first">Top</a></li>
<li><a href="up">Up</a></li>
<li><a href="down">Down</a></li>
<li><a href="#last">Bottom</a></li>
</ul>
</nav>
<section class="float-deck" style="background: #639;"
data-anchor-target="#second" data-smooth-scrolling="off"
data-bottom-bottom="transform: translateY(0%);"
data-top-bottom="transform: translateY(-100%);">
<span>2</span>
</section>
<main id="skrollr-body">
<section class="skrollr-deck" style="background: #393;" id="first">
<span>1</span>
</section>
<section class="skrollr-deck float-void" id="second"></section>
<section class="skrollr-deck" style="color: #fff; background: #963;">
<br>
<br>
<br>
<br>
<br>
<p>Long content...</p>
<br>
<br>
<br>
<br>
<br>
<p>Long content...</p>
<br>
<br>
<br>
<br>
<br>
<p>Long content...</p>
<br>
<br>
<br>
<br>
<br>
<p>Long content...</p>
<br>
<br>
<br>
<br>
<br>
<p>Long content...</p>
<br>
<br>
<br>
<br>
<br>
<p>Long content...</p>
<br>
<br>
<br>
<br>
<br>
<p>Long content...</p>
<br>
<br>
<br>
<br>
<br>
<p>Long content...</p>
<br>
<br>
<br>
<br>
<br>
</section>
<section class="skrollr-deck" style="background: #699;">
<span>4</span>
</section>
<section class="skrollr-deck" style="background: #933;">
<span>5</span>
</section>
<section class="skrollr-deck" id="last" style="padding: 50px 0;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi nobis fugit atque placeat, illo consequuntur ipsa corporis laborum commodi incidunt! Voluptas, vel, quibusdam.</p>
<p>Deleniti doloribus, voluptatibus praesentium recusandae, quos debitis. Voluptatum vel praesentium quo, pariatur odit nulla. Enim, ipsam, optio deserunt aperiam quo placeat ad repudiandae!</p>
<p>Rerum sed libero dolor neque explicabo amet culpa qui! Cupiditate accusamus necessitatibus quo, non, ratione facilis sint aliquam in iste optio quidem, eligendi.</p>
<p>Ex perferendis vitae iure nesciunt, tenetur laborum dolores, nulla, magni omnis libero cupiditate reprehenderit porro impedit quibusdam eveniet quos odio nihil laudantium repellendus.</p>
<p>Dolore ducimus est id alias unde aut ut magnam, quia voluptas dolorum sit rerum ea incidunt molestias, autem illo distinctio laboriosam commodi architecto?</p>
<p>Et adipisci vel molestias beatae odio vero tempore, suscipit consectetur fugiat similique consequuntur, officiis delectus enim reiciendis accusamus eum accusantium, possimus eos perferendis.</p>
<p>Odio minus enim, earum similique perspiciatis. Iusto eveniet, alias dignissimos expedita. Tempore rem, amet possimus. Nobis laudantium fugit est incidunt, libero atque aperiam.</p>
<p>Dolorum possimus magni optio distinctio facilis eum neque beatae debitis saepe voluptatibus laborum nam omnis excepturi adipisci perspiciatis, dicta amet odit impedit aspernatur!</p>
<p>Expedita labore et vero. Optio eius vitae illo ea aut doloribus cumque qui maiores consectetur, omnis, ut nulla cupiditate rerum. Sequi, quaerat, cupiditate.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi nobis fugit atque placeat, illo consequuntur ipsa corporis laborum commodi incidunt! Voluptas, vel, quibusdam.</p>
<p>Deleniti doloribus, voluptatibus praesentium recusandae, quos debitis. Voluptatum vel praesentium quo, pariatur odit nulla. Enim, ipsam, optio deserunt aperiam quo placeat ad repudiandae!</p>
<p>Rerum sed libero dolor neque explicabo amet culpa qui! Cupiditate accusamus necessitatibus quo, non, ratione facilis sint aliquam in iste optio quidem, eligendi.</p>
<p>Ex perferendis vitae iure nesciunt, tenetur laborum dolores, nulla, magni omnis libero cupiditate reprehenderit porro impedit quibusdam eveniet quos odio nihil laudantium repellendus.</p>
<p>Dolore ducimus est id alias unde aut ut magnam, quia voluptas dolorum sit rerum ea incidunt molestias, autem illo distinctio laboriosam commodi architecto?</p>
<p>Et adipisci vel molestias beatae odio vero tempore, suscipit consectetur fugiat similique consequuntur, officiis delectus enim reiciendis accusamus eum accusantium, possimus eos perferendis.</p>
<p>Odio minus enim, earum similique perspiciatis. Iusto eveniet, alias dignissimos expedita. Tempore rem, amet possimus. Nobis laudantium fugit est incidunt, libero atque aperiam.</p>
<p>Dolorum possimus magni optio distinctio facilis eum neque beatae debitis saepe voluptatibus laborum nam omnis excepturi adipisci perspiciatis, dicta amet odit impedit aspernatur!</p>
<p>Expedita labore et vero. Optio eius vitae illo ea aut doloribus cumque qui maiores consectetur, omnis, ut nulla cupiditate rerum. Sequi, quaerat, cupiditate.</p>
</section>
</main>
</div>
<script src='https://prinzhorn.github.io/skrollr/dist/skrollr.min.js'></script>
<!-- <script src="src/skrollr.decks.js"></script> -->
<!-- 此处js已经在下面use strict里面写了，无需再引 -->
<script>
document.querySelector('.main-nav').addEventListener('click', function (e) {
var el = e.target;
if(el.tagName === 'A') {
skrollr.decks.animateTo(el.getAttribute('href'));
}
e.preventDefault();
}, false);
</script>
</body>
</html>
<script type="text/javascript">
(function (module) {
"use strict";
if( ! window.skrollr) {
console.error('`skrollr` not found');
} else {
window.skrollr.decks = module(window, document, window.skrollr);
}
} (function (window, document, skrollr) {
"use strict";
var defaults = {
decks: '.skrollr-deck',
offset: 10,
duration: 600,
easing: 'quadratic',
delay: 500,
autoscroll: true,
history: false
}, callbacks = {
render: [],
change: []
};
var isInitialized = false,
settings,
segments = {},
segmentsList = [],
nav = document.createElement('ul'),
currentDeck;
// Stop animating on scroll keys
skrollr.addEvent(document, 'keydown', function (e) {
var inst = skrollr.get(),
keys = [38, 40,
33, 34,
36, 35];
if(keys.indexOf(e.keyCode) > -1) {
if(inst && inst.isAnimatingTo()) {
inst.stopAnimateTo();
}
}
})
// Auto initialize
skrollr.addEvent(document, 'DOMContentLoaded', function () {
if(document.querySelector('body.skrollr-decks-init')) {
init();
}
})
// Auto resize
skrollr.addEvent(window, 'load resize', function () {
resizeDecks({});
if(currentDeck) {
animateTo('#' + currentDeck.id, true);
} else {
update({});
}
});
return {
init: init,
animateTo: animateTo,
refresh: resizeDecks,
on: on
};
function on(name, cb) {
if((name = name.toLowerCase()) in callbacks && typeof cb === 'function') {
callbacks[name].unshift(cb);
}
}
function trigger(name, data) {
var collection = callbacks[name], i;
for(i = collection.length - 1; i > -1; i--) {
collection[i].apply({}, data);
}
}
// Initialize
function init (options) {
if(isInitialized) {
return false;
} else {
isInitialized = true;
}
var setTimeout = window.setTimeout,
clearTimeout = window.clearTimeout,
inst, renderTimer, local;
local = settings = extend({}, defaults, options, getDataAttrs(document.body));
inst = skrollr.init({
forceHeight: false
});
segments = findDecks(local.decks, segmentsList);
nav = createNav(segmentsList);
resizeDecks();
document.body.appendChild(nav);
inst.refresh(nav.children);
on('change', function (active) {
var id = location.href.split("#")[0] +'#' + active.id;
if(local.history) {
if(history.pushState) {
history.pushState(null, null, id);
} else {
window.location.hash = id;
}
}
});
inst.on('render', function (e) {
var inst = this,
coord = update.call(inst, e);
clearTimeout(renderTimer);
if(coord !== undefined && local.autoscroll) {
renderTimer = setTimeout(function () {
inst.animateTo(coord, local);
}, local.delay);
}
trigger('render', [e]);
});
}
// Goto
function animateTo(anchor, noAnim) {
var el = segments[anchor],
inst = skrollr.get(),
top, active, index;
if(inst) {
inst.stopAnimateTo();
if( ! el) {
active = nav.getElementsByClassName('skrollable-between');
if(active.length === 1) {
index = Number(active[0].getAttribute('data-skrollr-decks-index'));
el = segmentsList[anchor === 'up' ? index - 1 : anchor === 'down' ? index + 1 : -1];
}
if(active.length === 2) {
active = active[anchor === 'up' ? 0 : anchor === 'down' ? 1 : -1];
el = active ? segments[active.getAttribute('data-anchor-target')] : null;
}
}
if(el) {
top = inst.relativeToAbsolute(el, 'top', 'top') + 1;
if(noAnim) {
inst.setScrollTop(top, true);
} else {
inst.animateTo(top, settings);
}
return true;
}
}
return false;
}
// Update decks size
function resizeDecks() {
if( ! isInitialized) {
return;
}
var wndHeight = window.innerHeight + 2,
deck, deckHeight, i;
for(i = segmentsList.length - 1; i > -1; i--) {
deck = segmentsList[i];
deck.style.height = 'auto';
deckHeight = deck.offsetHeight;
deck.style.height = (deckHeight < wndHeight ? wndHeight : deckHeight) + 'px';
}
skrollr.get().refresh(segmentsList);
}
// Active and Autoscroll
function update(e) {
if( ! isInitialized) {
return;
}
var inst = skrollr.get(),
active = nav.getElementsByClassName('skrollable-between'),
wndTop = e.curTop,
wndHeight = window.innerHeight,
offset = wndHeight * settings.offset / 100,
el, upper, lower, top, bottom, coord;
if(active.length === 1) {
el = segments[active[0].getAttribute('data-anchor-target')];
currentDeck !== el && trigger('change', [el])
currentDeck = el;
}
if(active.length === 2) {
upper = segments[active[0].getAttribute('data-anchor-target')];
lower = segments[active[1].getAttribute('data-anchor-target')];
bottom = inst.relativeToAbsolute(upper, 'top', 'bottom');
top = inst.relativeToAbsolute(lower, 'top', 'top');
if(e.direction === 'up' && bottom - offset > wndTop || top + offset > wndTop + wndHeight) {
el = upper;
coord = bottom - wndHeight - 1;
} else {
el = lower;
coord = top + 1;
}
currentDeck !== el && trigger('change', [el])
currentDeck = el;
return coord;
}
}
// Layout
function findDecks(selector, list) {
var items = {},
start = +new Date(),
el, i, id;
if(typeof selector === 'string') {
selector = document.querySelectorAll(selector);
for(i = selector.length - 1; i > -1; i--) {
el = selector[i];
list.unshift(el);
el.id = !! el.id ? el.id : 'skroll-deck-id-' + i;
items['#' + el.id] = el;
}
}
return items;
}
function createNav(list) {
var frag = document.createElement('ul'),
item = document.createElement('li'),
i, max, el;
frag.style.display = 'none';
item.setAttribute('data-top-bottom', '');
item.setAttribute('data-bottom-top', '');
for(i = 0, max = list.length; i < max; i++) {
el = item.cloneNode();
el.setAttribute('data-skrollr-decks-index', i);
el.setAttribute('data-anchor-target', '#' + list[i].id);
frag.appendChild(el);
}
return frag;
}
function extend() {
var result = arguments[0] || {};
var i, max, options, key;
for (i = 1, max = arguments.length; i < max; i++) {
options = arguments[i];
if (options != null) {
for (key in options) if(options.hasOwnProperty(key) && options[key] !== undefined) {
result[key] = options[key];
}
}
}
return result;
}
function getDataAttrs(el) {
var attrs = el.attributes,
prefix = 'data-skrollr-decks-',
i, name, val,
result = {};
for(i = attrs.length; i--; ) {
name = attrs[i].name;
val = attrs[i].value;
if(name.indexOf(prefix) === 0) {
result[name.substring(prefix.length)] =
val === 'true' ? true :
val === 'false' ? false :
isNaN(val) ? val : Number(val);
}
}
return result;
}
}));
</script>