Плавный переход по якорям

mishka · December 2, 2010

Было дело, тут спрашивали как такое осуществить.

Сегодня была такая задача, и я ее реализовал, конечно не на чистом JS, а с помощью jQuery.

Но все же поделюсь своим кодом, мож кому пригодиться.

Из плюсов: при отключенном джс работает как обычный якорь.

Можно менять время за которое будет осуществлена прокрутка, и также можно менять easing, если дополнительно подключить плагин изинга (http://gsgd.co.uk/sandbox/jquery/easing/)

подключение
jQuery('a[href^="#"]').anchorScroll();

сам плагин
// anchorScroll
jQuery.fn.anchorScroll = function(options){
	var options = jQuery.extend({
		duration: 300,
		easing: 'swing',
		locationReplace: true
	}, options);

	return this.each(function(){
		var $this = jQuery(this),
			_hash = this.hash,
			_boxTo = jQuery(this.hash),
			_duration = options.duration,
			_easing = options.easing,
			_locationReplace = options.locationReplace;

		if(_boxTo.length && _boxTo.is(':visible')){
			$this.bind('click', function(){
				jQuery('html, body').animate({scrollTop: _boxTo.offset().top}, {queue: false, easing: _easing, duration: _duration, complete: function(){
					if(_locationReplace) location.hash = _hash.replace('#', '');
				}});
				return false;
			})
		}
	})
}

Как всегда, хочется все сделать универсально и без багов, поэтому какие замечания, предложения - пишите.

Edited December 2, 2010 by mishka2

psywalker · December 2, 2010

Медвежон, а если не сложно, приведи плиз полный пример с работающей страницей.

mishka · December 2, 2010

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<title>anchorScroll</title>
	<style type="text/css">
		#wrapper {
			width: 70%;
			margin: 0 auto;
		}
	</style>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
	<script type="text/javascript">
		jQuery(function(){
			jQuery('a[href^="#"]').anchorScroll();
		})

		// anchorScroll
		jQuery.fn.anchorScroll = function(options){
			var options = jQuery.extend({
				duration: 300,
				easing: 'swing',
				locationReplace: true
			}, options);

			return this.each(function(){
				var $this = jQuery(this),
					_hash = this.hash,
					_boxTo = jQuery(this.hash),
					_duration = options.duration,
					_easing = options.easing,
					_locationReplace = options.locationReplace;

				if(_boxTo.length && _boxTo.is(':visible')){
					$this.bind('click', function(){
						jQuery('html, body').animate({scrollTop: _boxTo.offset().top}, {queue: false, easing: _easing, duration: _duration, complete: function(){
							if(_locationReplace) location.hash = _hash.replace('#', '');
						}});
						return false;
					})
				}
			})
		}
	</script>
</head>
<body>
	<div id="wrapper">
		<a href="#id1">id1</a>
		<a href="#id2">id2</a>
		<a href="#id3">id3</a>
		<a href="#id4">id4</a>
		<p>Lorem ipsum dolor sit amet consectetuer nulla eros a Nam ut. A wisi Phasellus nulla porttitor semper id et facilisis sapien Nullam. Leo lobortis condimentum sit In quis et ligula id Suspendisse Sed. Orci gravida Integer pede enim metus nibh nec cursus vitae a. Pellentesque Pellentesque eget Aliquam dictum wisi tristique ligula massa id diam. Ante convallis Aenean Nam at ac urna libero a eleifend facilisis. Nunc condimentum massa venenatis orci mauris elit faucibus pellentesque vel leo. Hendrerit lorem gravida eros orci Aenean nascetur Vestibulum sed nibh sed. A id libero nec Cras Pellentesque dui tincidunt eu tincidunt nulla. Pretium condimentum Proin Aenean at tincidunt urna senectus Lorem enim Nunc. Magnis facilisi Vestibulum turpis gravida id id lacus pulvinar tempor nulla. Aenean neque velit vitae dapibus elit In consequat ultrices enim vestibulum. Sed risus nibh nulla massa egestas.</p>
		<div id="id1">1</div>
		<p>Justo convallis convallis suscipit sem mus ipsum id Sed dui Donec. Pede Nam pede semper congue quis sit ullamcorper eu a nec. Tincidunt odio ligula dis consectetuer est Pellentesque pede elit dui lacus. Porttitor dictum orci eu amet Nullam eu neque vitae consectetuer semper. Accumsan facilisi leo accumsan Nam laoreet ut parturient ut ipsum tempus. Et faucibus molestie orci fringilla leo enim pellentesque laoreet pretium nec. Sed metus magna Integer ut tempus elit ut nibh congue consequat. Tristique eget Ut mauris consequat Donec vel Morbi orci et ac. Sem elit eu Sed vitae hendrerit orci nulla Curabitur ornare Integer. Orci elit id justo Maecenas ac leo.</p>
		<p>Elit Sed In cursus eleifend Suspendisse nisl ac gravida et pellentesque. Lacinia ipsum Nam id consectetuer nec Curabitur eleifend nulla et odio. Curabitur est Nam Nam orci Morbi Integer ac consequat ut fames. Quis condimentum sollicitudin congue orci ac congue interdum at a mollis. Enim dui morbi urna magna et Nullam felis Donec justo mattis. Lacus condimentum elit enim facilisi condimentum convallis amet pede Donec Proin. Nam cursus pede Aenean dictumst tellus eros mattis sem Aenean parturient. Convallis semper Quisque nunc lacinia urna tellus Lorem Nam Donec quis. Lacus Mauris Sed condimentum ante Vivamus et tortor pellentesque et sed. Sapien dui felis elit ante rhoncus Aenean mus Proin In ac. Justo metus pretium tellus lacinia at at id pretium tempus fames. Montes id non habitasse vel fringilla hendrerit tellus eget et lacinia. Aenean turpis accumsan sed elit turpis platea orci quis fames Aenean. Pretium feugiat arcu et quam.</p>
		<div id="id2">2</div>
		<p>Odio ut Nunc et ipsum Nam turpis Curabitur risus volutpat Vivamus. Dolor Sed Nunc et pretium lacus nibh hendrerit sodales magna nibh. Convallis ante morbi volutpat venenatis at ut Morbi Nulla feugiat Nulla. Ut pretium leo netus vel facilisis odio nascetur Curabitur ac quis. Wisi sagittis felis sed Nam ac Phasellus sed laoreet et hendrerit. Sem urna est leo pharetra tellus nunc Pellentesque a ut lorem. Parturient et facilisis pretium porttitor mi Praesent sem Curabitur Phasellus libero. Nec lobortis pellentesque ipsum fermentum orci eu feugiat tincidunt adipiscing interdum. Pellentesque Praesent ornare morbi risus fermentum wisi tellus vel hendrerit urna. Justo fermentum justo urna laoreet hendrerit eleifend facilisi Integer interdum Vestibulum. Ut Nulla felis lobortis semper est a Phasellus Pellentesque Curabitur at. Consectetuer elit pede non adipiscing aliquet ac condimentum parturient eu adipiscing. Nibh eu massa fringilla.</p>
		<p>Ut Sed convallis rhoncus auctor Phasellus Nam nec convallis non tortor. Egestas dictumst mollis tempor ante Nam Vivamus eu lorem Nulla sem. Ullamcorper ut ut mauris accumsan nibh congue et ac enim egestas. Et dapibus commodo consequat sociis id semper habitasse ut wisi fermentum. Ac Nunc Aliquam porta ridiculus eu eu Nulla vitae dui felis. Tempor et sociis id ligula Curabitur turpis at sapien consequat sagittis. Ut wisi velit diam sagittis quis quis dolor magna enim laoreet. Pede id interdum volutpat Cum Curabitur egestas magnis consequat pretium Mauris. Aliquam semper semper est condimentum ut nibh vestibulum Ut wisi wisi. Mollis ligula pharetra fames.</p>
		<p>Aliquam vel Maecenas quis in augue Quisque elit sagittis eget eu. Sed dui Curabitur Nulla neque feugiat et wisi Nam vitae nulla. Ante tempus neque elit felis Integer tortor malesuada non egestas nunc. Risus consequat et Nunc Quisque interdum aliquam Nullam dignissim pulvinar quis. Sed Vestibulum vestibulum mus pharetra dolor Phasellus turpis ut tellus lacinia. Neque a lorem eget eu massa nec feugiat tortor laoreet vitae. Duis vel arcu Nam facilisis porttitor consectetuer et Vestibulum elit sed. Odio pretium massa netus interdum dui laoreet risus velit et nibh. Velit leo convallis purus vitae semper eu nunc Mauris ac ac. Augue vel elit auctor elit tempor id tempus eget.</p>
		<p>Urna commodo nulla egestas Nunc In et Curabitur consequat dapibus Sed. Eros eu dolor vitae ac Nam sed Integer et auctor parturient. Pede Vestibulum Quisque habitant eros leo justo tristique Sed interdum adipiscing. Nunc Curabitur velit Quisque id tellus leo Quisque Aliquam et ante. In convallis euismod non vel consectetuer nec ut Lorem vitae quis. Vestibulum vel sed velit netus justo adipiscing arcu turpis quis orci. Sed Vestibulum hendrerit nibh eros dui non sapien risus Sed convallis. Justo urna wisi semper amet In Sed mi lacinia enim Cras. Mauris senectus quis suscipit tortor convallis dictum felis Sed odio Quisque. Dui tortor.</p>
		<div id="id3">3</div>
		<p>Mollis malesuada est facilisi pharetra velit eget pede Vestibulum pede elit. Quis porttitor ipsum pharetra elit tempor faucibus Sed congue tristique at. Elit urna interdum ipsum Nam elit est sed volutpat egestas Nulla. Eu nonummy felis elit a justo Integer Nullam hendrerit a Ut. Tristique consequat Nam nulla id tellus sem elit dolor condimentum vitae. Vitae quis convallis ante condimentum tristique elit nulla nec rutrum ante. Sed augue metus ligula convallis feugiat ullamcorper lacinia Curabitur felis accumsan. Eget hendrerit ut est eu cursus adipiscing Sed tincidunt at consectetuer. Nunc tempor natoque libero sem et dolor purus sed aliquet et. Pulvinar Aenean eleifend orci suscipit dictumst id pede semper sit vitae. Vestibulum Sed gravida id neque orci adipiscing consectetuer ligula felis scelerisque. Wisi congue lacus mauris id faucibus ipsum semper volutpat morbi.</p>
		<p>Consequat ullamcorper elit malesuada lorem tincidunt ante porttitor volutpat Maecenas Sed. Pellentesque Phasellus sociis turpis egestas lacus Curabitur augue tortor nibh orci. At Vivamus tortor consectetuer Pellentesque ac urna Suspendisse non egestas lorem. Enim sapien orci tellus Sed Vivamus interdum Nam wisi congue Integer. Donec Vestibulum pellentesque odio semper est Nam ridiculus mi elit Nulla. Cursus dui libero odio Pellentesque Proin laoreet nec eu convallis tincidunt. At dolor Nulla faucibus Morbi vel tincidunt nibh sapien Vivamus mi. Congue quam sem orci semper natoque et convallis elit a montes. Velit Nulla et velit quis sodales leo Donec pede Nulla mauris. Nulla vel nec accumsan tempor convallis Vestibulum pede sem consectetuer.</p>
		<div id="id4">4</div>
		<p>Venenatis odio magnis non Nam ullamcorper morbi Aliquam Phasellus et Nam. Metus consequat quis mauris neque felis Nullam turpis Maecenas ante Sed. Urna sem quis magna Curabitur sollicitudin Pellentesque pulvinar mollis Mauris ipsum. Elit et sociis eros tincidunt aliquam pellentesque Aenean Nullam ut risus. Ut in vel orci eget et pellentesque tincidunt ultrices amet non. Dolor metus semper ligula magnis ut id Quisque dolor quis lorem. Vitae In amet dolor lacus malesuada porttitor ridiculus magnis Curabitur pulvinar. Justo a pulvinar tincidunt montes lacus Morbi id sed a justo. Tellus augue Lorem Fusce penatibus ut nonummy justo congue sodales nunc. Hac elit quis Aliquam porttitor montes ut eros montes massa mattis. Sed tincidunt ante.</p>
	</div>
</body>
</html>

psywalker · December 2, 2010

Отлично Медведь.

А вот зацени, я такую же штуку на ЖС замутил, похожа?

http://psywalker.ru/Forum/JS/Primitive/Dom-Zadachi/Scroll/#

mishka · December 2, 2010

Фикс бага для хрома и сафари.

jQuery.fn.anchorScroll = function(options){
	var options = jQuery.extend({
		duration: 300,
		easing: 'swing',
		locationReplace: true
	}, options);

	return this.each(function(){
		var $this = jQuery(this),
			_hash = this.hash,
			_window = jQuery.browser.safari ? jQuery('body:eq(0)') : jQuery('html:eq(0)'),
			_boxTo = jQuery(this.hash),
			_duration = options.duration,
			_easing = options.easing,
			_locationReplace = options.locationReplace;

		if(_boxTo.length && _boxTo.is(':visible')){
			$this.bind('click', function(){
				_window.animate({scrollTop: _boxTo.offset().top}, {queue: false, easing: _easing, duration: _duration, complete: function(){
					if(_locationReplace) location.hash = _hash.replace('#', '');
				}});
				return false;
			})
		}
	})
}

Sign In

Плавный переход по якорям

Question

mishka

Link to comment

Share on other sites

4 answers to this question

Recommended Posts

psywalker

Link to comment

Share on other sites

mishka

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

mishka

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information