Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Перевод с jquery на чистый javascript (https://javascript.ru/forum/dom-window/68276-perevod-s-jquery-na-chistyjj-javascript.html)

Antonjrjr 06.04.2017 15:02

Перевод с jquery на чистый javascript
 
Ребят как на чистом javascripte написать эту jquery функцию
$(document).ready(function(){
	$("#menu").on("click","a", function (event) {
		event.preventDefault();

		var id  = $(this).attr('href'),

			top = $(id).offset().top;
		
		$('body,html').animate({scrollTop: top}, 1500);
	});
});

ksa 06.04.2017 15:30

Цитата:

Сообщение от Antonjrjr
как на чистом javascripte написать эту jquery функцию

Для затравки...
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<!--
<script src='http://code.jquery.com/jquery-latest.js'></script>
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
-->
<style type='text/css'>
</style>
<script type='text/javascript'>
document.addEventListener('DOMContentLoaded',function(){
	var o=document.getElementById('menu');
	o.addEventListener('click',function(event){
		if (event.target.tagName=='A') {
			event.preventDefault();
			var id  = event.target.getAttribute('href');
			alert(id);
			//top = $(id).offset().top;
			//$('body,html').animate({scrollTop: top}, 1500);
		};
	});
});
</script>
</head>
<body>
<div id='menu'>
	<a href='itm0'>Item 0</a>
	<a href='itm1'>Item 1</a>
	<a href='itm2'>Item 2</a>
</div>
</body>
</html>


Для ознакомления...
http://www.codeharmony.ru/materials/149

Antonjrjr 07.04.2017 08:54

скролл табов
 
А как сделать чтобы он плавно спускался вниз, а не выводил id таба?

Цитата:

Сообщение от ksa (Сообщение 449415)
Для затравки...
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<!--
<script src='http://code.jquery.com/jquery-latest.js'></script>
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
-->
<style type='text/css'>
</style>
<script type='text/javascript'>
document.addEventListener('DOMContentLoaded',function(){
	var o=document.getElementById('menu');
	o.addEventListener('click',function(event){
		if (event.target.tagName=='A') {
			event.preventDefault();
			var id  = event.target.getAttribute('href');
			alert(id);
			//top = $(id).offset().top;
			//$('body,html').animate({scrollTop: top}, 1500);
		};
	});
});
</script>
</head>
<body>
<div id='menu'>
	<a href='itm0'>Item 0</a>
	<a href='itm1'>Item 1</a>
	<a href='itm2'>Item 2</a>
</div>
</body>
</html>


Для ознакомления...
http://www.codeharmony.ru/materials/149


Antonjrjr 07.04.2017 08:54

скролл табов
 
А как сделать чтобы он плавно спускался вниз, а не выводил id таба?

Цитата:

Сообщение от ksa (Сообщение 449415)
Для затравки...
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<!--
<script src='http://code.jquery.com/jquery-latest.js'></script>
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
-->
<style type='text/css'>
</style>
<script type='text/javascript'>
document.addEventListener('DOMContentLoaded',function(){
	var o=document.getElementById('menu');
	o.addEventListener('click',function(event){
		if (event.target.tagName=='A') {
			event.preventDefault();
			var id  = event.target.getAttribute('href');
			alert(id);
			//top = $(id).offset().top;
			//$('body,html').animate({scrollTop: top}, 1500);
		};
	});
});
</script>
</head>
<body>
<div id='menu'>
	<a href='itm0'>Item 0</a>
	<a href='itm1'>Item 1</a>
	<a href='itm2'>Item 2</a>
</div>
</body>
</html>


Для ознакомления...
http://www.codeharmony.ru/materials/149


Antonjrjr 07.04.2017 08:54

скролл табов
 
А как сделать чтобы он плавно спускался вниз, а не выводил id таба?

Цитата:

Сообщение от ksa (Сообщение 449415)
Для затравки...
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<!--
<script src='http://code.jquery.com/jquery-latest.js'></script>
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
-->
<style type='text/css'>
</style>
<script type='text/javascript'>
document.addEventListener('DOMContentLoaded',function(){
	var o=document.getElementById('menu');
	o.addEventListener('click',function(event){
		if (event.target.tagName=='A') {
			event.preventDefault();
			var id  = event.target.getAttribute('href');
			alert(id);
			//top = $(id).offset().top;
			//$('body,html').animate({scrollTop: top}, 1500);
		};
	});
});
</script>
</head>
<body>
<div id='menu'>
	<a href='itm0'>Item 0</a>
	<a href='itm1'>Item 1</a>
	<a href='itm2'>Item 2</a>
</div>
</body>
</html>


Для ознакомления...
http://www.codeharmony.ru/materials/149


ksa 07.04.2017 09:18

Цитата:

Сообщение от Antonjrjr
А как сделать чтобы он плавно спускался вниз

Программку писать нужно...

Antonjrjr 07.04.2017 09:23

Цитата:

Сообщение от ksa (Сообщение 449475)
Программку писать нужно...

суть вопроса была в этом )) как ее написать , я никак не могу врубиться

ksa 07.04.2017 09:24

Цитата:

Сообщение от Antonjrjr
как ее написать , я никак не могу врубиться

Тогда в раздел "Работа"...

Antonjrjr 07.04.2017 09:27

Цитата:

Сообщение от ksa (Сообщение 449479)
Тогда в раздел "Работа"...

зачем мне, можешь помочь это ведь для меня

рони 07.04.2017 10:26

Antonjrjr,
http://javascript.ru/forum/showthrea...442#post366495


Часовой пояс GMT +3, время: 21:12.