Nicole McIntyre 发布于

文章来源： 100素材网更新时间： 2014-09-13 20:30:32

html锚点定位锚点定位 sexymap插件锚点定位 a标签锚点定位

<a style="display:none" href="http://www.100sucai.com">www.100sucai.com</a>
        <!DOCTYPE html>
<html class="no-skrollr">
<head>
<title>SectionSnap by Roman Kühl - Example</title>
<script src="http://www.100sucai.com/js/jquery.js"></script>
<script type="text/javascript">
    (function($) {
	$.fn.sectionsnap = function( options ) {
		var settings = $.extend({
			'delay'				: 100 // time dilay (ms)
			, 'selector'		: ".section" // selector
			, 'reference'		: .9 // % of window height from which we start
			, 'animationTime'	: 400 // animation time (snap scrolling)
		}, options);		
		
		var $wrapper = this
		, direction = 'down'
		, currentScrollTop = $(window).scrollTop()
		, scrollTimer
		, animating = false;

// check the direction
		var updateDirection = function() {
			if ($(window).scrollTop() >= currentScrollTop)
				direction = 'down';
			else
				direction = 'up';
			currentScrollTop = $(window).scrollTop();
		}

// return the closest element (depending on direction)
		var getClosestElement = function() {			
			var $list = $wrapper.find(settings.selector)
			, wt = $(window).scrollTop()
			, wh = $(window).height()
			, refY = wh * settings.reference
			, wtd = wt + refY - 1
			, $target;

if (direction == 'down') {
				$list.each(function() {
					var st = $(this).position().top;					
					if ((st > wt) && (st <= wtd)) {
						$target = $(this);
						return false; // just to break the each loop
					}
				});
			} else {
				wtd = wt - refY + 1;
				$list.each(function() {
					var st = $(this).position().top;					
					if ((st < wt) && (st >= wtd)) {
						$target = $(this);
						return false; // just to break the each loop
					}
				});
			}
			return $target;
		}

// snap
		var snap = function() {
			var $target = getClosestElement();
			if ($target) {
				animating = true;
				$('html, body').animate({
						scrollTop: ($target.offset().top)
					}, settings.animationTime, function() {
						window.clearTimeout(scrollTimer);
						animating = false;
					});
			}
		}
		// on window scroll
		var windowScroll = function() {
			if (animating) 
				return;
			updateDirection();
			window.clearTimeout(scrollTimer);
			scrollTimer = window.setTimeout(snap, settings.delay);
		}
		$(window).scroll(windowScroll);
		return this;
	};
})(jQuery);
    </script>
<style>
html, body {
	padding: 0;
	margin: 0;
}
.section {
	min-height: 300px;
}
.s1 {
	background-color: #00f5a1;
}
.s2 {
	background-color: #fc225c;
}
.s3 {
	background-color: #000000;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<body>
<div class="sections-wrapper">
  <div class="section s1"></div>
  <div class="section s2"></div>
  <div class="section s3"></div>
</div>
<script>
		$(document).ready(function() {
			$(".section").css("min-height", $(window).height() + "px");
			$(".sections-wrapper").sectionsnap({
				delay : 100
				, selector : '.section'
				, reference : 1
				, animationTime : 600
			});
		});
	</script>
</body>
</html>

在线演示

浏览次数次

react源码系统 vue源码系统 vue + typeScript源码系统

上一篇文章：图片滚动到浏览器页面顶部后停止滚动的网页前端代码特效

下一篇文章：网页全屏焦点图上下锚链滚动显示web素材代码

首页

jquery特效

网页素材

网页特效

网站模板

图片素材

轻轻碰动鼠标滚动键网页就上下适应的滑动到相对应地方的网页锚链代码

推荐阅读：

相关代码：

标签分类