Я начал учиться javascript. Как я могу добавить другую функцию прокрутки? - PullRequest
0 голосов
/ 04 апреля 2020

Это HTML -код:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Welcome</title>
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
	<div class="container-fluid">
		<header>
				<div id="menu" class="row no-gutter menu">
					<div class="col-md-3 offset-md-1">
						<img src="img/logo.png">
					</div>
					<div class="col-md-8">
						<nav class="d-flex flex-row-reverse">
						<ul class="p-2">
							<li>
								<a href="">Improves</a>
							</li>
							<li>
								<a href="">Projects</a>
							</li>
							<li>
								<a id="about" href="">About</a>
							</li>
							<li>
								<a href="index.html">Home</a>
							</li>
						</ul>
						</nav>
					</div>
				</div>
				<div class="row no-gutter">
					<div class="hellopage">
						<div class="col-md-10 offset-md-1 hello">
						<font>
							Hello.
						</font>
						<br>
						<div class="mynameis">
							My name is
							<div class="name">
								DENIS,
							</div>
						</div>
						<div class="whoami">
							I am a web-desihner, and front-end developer, and a person, who interested in IT.
						</div>
						<div class="quality">
							Quality is a main parametr for me.
						</div>
						<div class="classcol-md-5 offset-md-4">
							<button class="bnative1" id="button">
								FOLLOW ME
							</button> 
						</div>
						</div>
					</div>
				</div>
		</header>
		<!-- Второй блок -->
		<div class="container-fluid">
			<div id="sb" class="row no-gutter sb">
				<div class="col-md-6 offset-md-3 text-center whatcani">
					What can I offer for you?
				</div>
				<div class="col-md-3 offset-md-1 pic1 ">
					<img src="img/adopt.png">
					<div class="txt1">
						<div class="top1">Adaptive Web-Design</div>
						<div>I always use adaptive</div>
						<div>design.Usually,web-site</div>
						<div>is an advertisment</div>
						<div>for big set of companies.</div>
						<div>It have to be focused on</div>
						<div>client and must be</div>
						<div>correctly displayed in all</div>
						<div>devices</div>
					</div>
				</div>
				<div class="col-md-3 offset-md-1 pic2">
					<img src="img/hands.png">
					<div class="txt2">
					<div class="top2">Indivigual aproach</div>
					<div>I always interact with</div>
					<div>the customer and ready</div>
					<div>to give some advice,</div>
					<div>based on my experience</div>
					<div>to make web-site better</div>
					<div>and user-friendly</div>
					</div>
				</div>
				<div class="col-md-3 offset-md-1 pic3">
					<img src="img/calendar.png">
					<div class="txt3">
					<div class="top3">Completion on time</div>
					<div>The project will be</div>
					<div>compleated on time,</div>
					<div>and a work plan will be</div>
					<div>provided for the</div>
					<div>customer</div>
					</div>
				</div>
				<div class="col-md-8 offset-md-2 line">
					<hr>
				</div>
				
			</div>
				</div>
				<!-- Третий блок -->
				<div id="me" class="row no-gutter tb">
					<div class="col-md-3 offset-md-4 text-center  aboutme">
						About me
					</div>
					<div class="col-md-10 offset-md-1 txtab">
						<div>I started my career as a system administrator(2016). At work I</div>
						<div>recieved a lot of skills, that helps me to deal every issue. Because</div>
						<div>there are exist an issues, that you can't solve by using internet. For</div>
						<div>example I worked with special software for MRI.</div>
					</div>
					<div class="col-md-4 offset-md-1 whiteone">
						<img src="img/white.png">
					</div>
					<div class="col-md-6 nowi">
						Now I am <span class="wd">WEB DESIGNER</span>
					</div>
					<div class="col-md-9 offset-md-1 person">
						And a person, who ready to make <span class="cool">COOL</span> web-site for you.
					</div>
					<div class="col-md-4 offset-md-7 d-flex flex-row-reverse">
						<img class="whitetwo" src="img/white.png">
					</div>
				</div>
				<!-- Четвертый блок -->
				<div class="row no-gutter fob">
					<div class="col-md-5 offset-md-3 text-center inmy">
						In my projects I use
					</div>
					<div class="col-md-4 offset-md-1 desone">
						<img src="img/gapps.png">
						<div class="tech1">
							<div>I use graphical applications to</div>
							<div>make a template for your website.</div>
							<div>This is the first step. Here we can</div>
							<div>coose a colors, that will be used</div>
							<div>in web-site</div>
						</div>
					</div>
					<div class="col-md-6 destwo">
						<img src="img/site.png">
						<div class="tech1">
							<div>To make web-page, I use HTML,CSS, JS, Less. Here I</div>
							<div>can make animation, that can make your website</div>
							<div>alive.</div>
						</div>
					</div>
					<div class="col-md-10 offset-md-1 technologies">
						<div>I always <span class="devmy">DEVELOPE</span> myself, learn new technologies and</div>
					</div>
					<div class="col-md-4 offset-md-7 inmy"><span class="use">USE</span> it in my projects</div>
				</div>
				<!-- Футер -->
				<div class="row no-gutter foot">
					
						<div class="col-md-4 offset-md-1 social">
							<img src="img/email.png">
							den_lupanov@mail.ru
							<div class="fb">
								<img src="img/facebook.png">
								https://www.facebook.com/den.necris
							</div>
						</div>
						<div class="col-md-1 offset-md-5 gototop">
							<img id="up" src="img/up.png">
						</div>
					
				</div>	
			</div>
		</div>	
	</body>			
</html>
'''    	
    			
    	

    	

У меня есть код:

window.onload = function(){
	// Изменение цвета при наведении на кнопку
	var button = document.getElementById("button");
	button.addEventListener("mouseenter", function(){
		button.classList.remove("bnative1");
		button.classList.add("buttonclass1");
	});
	button.addEventListener("mouseleave", function(){
		button.classList.remove("buttonclass1");
		button.classList.add("bnative1");
	})
	// Scroll to the first element(Works ok)
	document.getElementById("button").addEventListener("click", scrollToElement);
	function scrollToElement(e){
	element = document.getElementById("sb");
	element.scrollIntoView({behavior: 'smooth', block: "start",});
	}
	//Scroll to another element(ERROR)
	document.getElementById("up").addEventListener("click", scrollToTop);
	function scrollToTop(e){
		top = document.getElementById("menu");
		top.scrollIntoView({behavior: 'smooth', block: "start"});
	}
 }

'''

Наконец, когда я нажимаю второй элемент для прокрутки, в отладчике я получаю сообщение об ошибке: «Uncaught TypeError: top.scrollIntoView не является функцией в HTMLImageElement.scrollToTop ( сценарий js:. 22)». Он должен работать правильно, но я не понимаю, почему он не работает

Ответы [ 2 ]

1 голос
/ 05 апреля 2020

вам просто нужно было определить «верх». добавь var и твой код работает!

window.onload = function(){


}

	// Изменение цвета при наведении на кнопку
	var button = document.getElementById("button");
	button.addEventListener("mouseenter", function(){
		button.classList.remove("bnative1");
		button.classList.add("buttonclass1");
	});
	button.addEventListener("mouseleave", function(){
		button.classList.remove("buttonclass1");
		button.classList.add("bnative1");
	})
	// Scroll to the first element(Works ok)
	document.getElementById("button").addEventListener("click", scrollToElement);
	function scrollToElement(e){
	element = document.getElementById("sb");
	element.scrollIntoView({behavior: 'smooth', block: "start",});
	}
	//Scroll to another element(ERROR)
	document.getElementById("up").addEventListener("click", scrollToTop);
	function scrollToTop(e){
		var top = document.getElementById("menu");
		top.scrollIntoView({behavior: 'smooth', block: "start"});
	}
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Welcome</title>
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
	<div class="container-fluid">
		<header>
				<div id="menu" class="row no-gutter menu">
					<div class="col-md-3 offset-md-1">
						<img src="img/logo.png">
					</div>
					<div class="col-md-8">
						<nav class="d-flex flex-row-reverse">
						<ul class="p-2">
							<li>
								<a href="">Improves</a>
							</li>
							<li>
								<a href="">Projects</a>
							</li>
							<li>
								<a id="about" href="">About</a>
							</li>
							<li>
								<a href="index.html">Home</a>
							</li>
						</ul>
						</nav>
					</div>
				</div>
				<div class="row no-gutter">
					<div class="hellopage">
						<div class="col-md-10 offset-md-1 hello">
						<font>
							Hello.
						</font>
						<br>
						<div class="mynameis">
							My name is
							<div class="name">
								DENIS,
							</div>
						</div>
						<div class="whoami">
							I am a web-desihner, and front-end developer, and a person, who interested in IT.
						</div>
						<div class="quality">
							Quality is a main parametr for me.
						</div>
						<div class="classcol-md-5 offset-md-4">
							<button class="bnative1" id="button">
								FOLLOW ME
							</button> 
						</div>
						</div>
					</div>
				</div>
		</header>
		<!-- Второй блок -->
		<div class="container-fluid">
			<div id="sb" class="row no-gutter sb">
				<div class="col-md-6 offset-md-3 text-center whatcani">
					What can I offer for you?
				</div>
				<div class="col-md-3 offset-md-1 pic1 ">
					<img src="img/adopt.png">
					<div class="txt1">
						<div class="top1">Adaptive Web-Design</div>
						<div>I always use adaptive</div>
						<div>design.Usually,web-site</div>
						<div>is an advertisment</div>
						<div>for big set of companies.</div>
						<div>It have to be focused on</div>
						<div>client and must be</div>
						<div>correctly displayed in all</div>
						<div>devices</div>
					</div>
				</div>
				<div class="col-md-3 offset-md-1 pic2">
					<img src="img/hands.png">
					<div class="txt2">
					<div class="top2">Indivigual aproach</div>
					<div>I always interact with</div>
					<div>the customer and ready</div>
					<div>to give some advice,</div>
					<div>based on my experience</div>
					<div>to make web-site better</div>
					<div>and user-friendly</div>
					</div>
				</div>
				<div class="col-md-3 offset-md-1 pic3">
					<img src="img/calendar.png">
					<div class="txt3">
					<div class="top3">Completion on time</div>
					<div>The project will be</div>
					<div>compleated on time,</div>
					<div>and a work plan will be</div>
					<div>provided for the</div>
					<div>customer</div>
					</div>
				</div>
				<div class="col-md-8 offset-md-2 line">
					<hr>
				</div>
				
			</div>
				</div>
				<!-- Третий блок -->
				<div id="me" class="row no-gutter tb">
					<div class="col-md-3 offset-md-4 text-center  aboutme">
						About me
					</div>
					<div class="col-md-10 offset-md-1 txtab">
						<div>I started my career as a system administrator(2016). At work I</div>
						<div>recieved a lot of skills, that helps me to deal every issue. Because</div>
						<div>there are exist an issues, that you can't solve by using internet. For</div>
						<div>example I worked with special software for MRI.</div>
					</div>
					<div class="col-md-4 offset-md-1 whiteone">
						<img src="img/white.png">
					</div>
					<div class="col-md-6 nowi">
						Now I am <span class="wd">WEB DESIGNER</span>
					</div>
					<div class="col-md-9 offset-md-1 person">
						And a person, who ready to make <span class="cool">COOL</span> web-site for you.
					</div>
					<div class="col-md-4 offset-md-7 d-flex flex-row-reverse">
						<img class="whitetwo" src="img/white.png">
					</div>
				</div>
				<!-- Четвертый блок -->
				<div class="row no-gutter fob">
					<div class="col-md-5 offset-md-3 text-center inmy">
						In my projects I use
					</div>
					<div class="col-md-4 offset-md-1 desone">
						<img src="img/gapps.png">
						<div class="tech1">
							<div>I use graphical applications to</div>
							<div>make a template for your website.</div>
							<div>This is the first step. Here we can</div>
							<div>coose a colors, that will be used</div>
							<div>in web-site</div>
						</div>
					</div>
					<div class="col-md-6 destwo">
						<img src="img/site.png">
						<div class="tech1">
							<div>To make web-page, I use HTML,CSS, JS, Less. Here I</div>
							<div>can make animation, that can make your website</div>
							<div>alive.</div>
						</div>
					</div>
					<div class="col-md-10 offset-md-1 technologies">
						<div>I always <span class="devmy">DEVELOPE</span> myself, learn new technologies and</div>
					</div>
					<div class="col-md-4 offset-md-7 inmy"><span class="use">USE</span> it in my projects</div>
				</div>
				<!-- Футер -->
				<div class="row no-gutter foot">
					
						<div class="col-md-4 offset-md-1 social">
							<img src="img/email.png">
							den_lupanov@mail.ru
							<div class="fb">
								<img src="img/facebook.png">
								https://www.facebook.com/den.necris
							</div>
						</div>
						<div class="col-md-1 offset-md-5 gototop">
							<img id="up" src="img/up.png">
						</div>
					
				</div>	
			</div>
0 голосов
/ 05 апреля 2020

Кроме использования этого, возможно, было бы лучше сделать его одной функцией и использовать его в HTML.

Следующий код должен работать как шарм:

function scrollSmoothTo(elementId) {
var element = document.getElementById(elementId);
element.scrollIntoView({ block: 'start',  behavior: 'smooth' });
}

И, в HTML используйте это так:

<a class="btn-outline-light" onclick="scrollSmoothTo('work')">See our work</a>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...