0

function closeModal(){
  var modal = document.getElementById('ModalOpen');
  modal.style.display = 'none';
}

function showModal(){
  var modal = document.getElementById('ModalOpen');
  modal.style.display = 'block';
}


function checkLoad() {
   var menu = document.getElementById('menu');

   function scroll(event) {
     var target = event.target;

     if (target.tagName != 'A') return;

     var id = document.querySelector(target.getAttribute('href'));
     var top = id.getBoundingClientRect().top + window.pageYOffset;

     if (document.body.scrollTop > top) {
       (function animate() {

         if (document.body.scrollTop >= top) {
           window.scrollBy(0, -1);
           setTimeout(animate, 20);
         }
         event.preventDefault();
         return;
       })();
     }

     if (document.body.scrollTop < top) {
       (function animate() {

         if (document.body.scrollTop <= top) {
           window.scrollBy(0, 1);
           setTimeout(animate, 20);
         }
         event.preventDefault();
         return;
       })();
     }
   }

   menu.addEventListener('click', scroll);
 }

 addEventListener('load', checkLoad);
.Window {
	 position: fixed;
	 top: 0;
	 right: 0;
	 bottom: 0;
	 left: 0;
	 background: rgba(0,0,0,0.7);
	 z-index: 99999;
	 transition: opacity 400ms ease-in;
	 display: none;
	 pointer-events: none;
}

.Window:target {
	display: block;
	pointer-events: auto;
}

.Window > div {
	 width: 1030px;
	 height:640px;
	 position: relative;
	 margin: 10px auto;
	 background: url("images/background.jpg") no-repeat;
	 background-position: 74px -50px;
	 background-size:925px 640px;
	 box-shadow: 0px 0px 20px 2px;
	 background-color:white;
}
.share{
	position:absolute;
	right-12px;
	top:52px;
	left:992px;
}
.fbshare{
	position:absolute;
	right:-12px;
	top:509px;
	left:992px;
}
.twshare{
	position:absolute;
	right:-12px;
	top:546px;
	left:992px;
}
a{
	float:right;
	text-decoration:none;
	color:white;
}
.leftcol{
	width:200px;
	height:590px;
	margin-top:-590px;
	float:left;
	background: url("images/lcolb.jpg") no-repeat;
	
}
.rigcol{
	width:45px;
	height:590px;
	margin-top:-590px;
	float:right;
	background-color:white;

}
.footer{
	position:fixed;
	top:600px;
	background-color:black;
	width:1030px;
	height:50px;
	

}
.learn{
	position:relative;
	top:-59px;
	width:260px;
	height:50px;
	background-color:#0066cc;
	float:right;
	
}
.learnT{
	font-size:20px;
	margin-right:50px;
}
.learn:hover {background:#3399FF;}
.learn:hover a {color:#fff}
hr{
	background-color:black;
	position:fixed;
	top:462px;
	width:40px;
	height:1px;
	margin-left:3px;
	border:0;
}
.Tfind{
	margin-top:380px;
	font-size:8px;
	font-weight:bold;
	text-align:center;
}
.Thorizont{
	margin:0;
	position:relative;
	top:-20px;
	left:211px;
	color:white;
}
.hr2{
	width:1px;
	height:30px;
	background-color:white;
	position:absolute;
	margin-left:200px;
	top:0px;
}
.hr3{
	width:170px;
	position:absolute;
	top:226px;
	left:5px;
}
.img1{
	margin-left:86px;
	margin-top:10px;
}
.img1{
	margin-left:46px;
	margin-top:12px;
}
.img2{
	margin-top:89px;
	margin-left:15px;
}
.videocontent{
		width:785px;
		height:443px;
		margin-top:107px;
	}
	.button1{
		width:732px;
		height:90px;
		border:0;
		padding:0;
	}
	.button2{
		width:30px;
		height:30px;
		margin-top:7px;
		margin-left:8px;
		border:0;
		padding:0;
	}
	.button3{
		width:30px;
		height:30px;
		margin-left:7px;
		margin-top:16px;
		border:0;
		padding:0;
	}
	.menu{
		width:200px;
		height:135px;
		margin-left:15px;
		font-size:18px;
		margin-top:22px;
	}
	.nav {
		font: 12pt;
		list-style:none;
		padding:0;
		margin-top:22px;
		margin-left:9px;
		width:190px;
		height:45px;
		text-transform:uppercase;
	}
	.tabs
	{
		font: 12pt;
		list-style:none;
		padding:0;
		margin-top:22px;
		width:190px;
		height:45px;
		text-transform:uppercase;
	}
	.nav  li a {
		display:block;
		width:190px;
		height:45px;
		line-height:40px;
		background:#fff;
		color:#000000;
		cursor:pointer;
		transition: all 0.6s linear;
		
	}
	.nav li a:hover{
  transform: scaleY(1.2);
	}
	.img3{
		margin-top:55px;
		margin-left:35px;
	
	}
	.content{
		width:785px;
		height:490px;
	}
	.main{
		width:785px;
		height:590px;
		overflow:scroll;
		position:relative;
		margin-left:200px;
		position:relative;
	}
<body>
 <a href="#ModalOpen" title="modal">
	 <button type="button" class="button1" id="modal_close" onclick="showModal();">
		<img src="images/ban.jpg">	
	 </button>
 </a>
	<div id="ModalOpen" class="Window">
		 <div class="content">
			<div class="main" >
				<section id="tab1">
					<video class="videocontent" controls poster="images/preview.jpg">
						<source src="images/ps.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
					</video>
				</section>
				<section id="tab2">
					<img src="images/background.jpg">
				</section>
			</div>	
				<div class="leftcol">
					<img class="img1" src="images/ps4.jpg">
					<img class="img2" src="images/logo.jpg">
							<div class="tabs" onclick ="checkLoad()>	
								<ul class="nav" id="menu">
									<li class="nav_item">
										<a href="#tab1">Video</a>
									</li>
									<li class="nav_item">
										<a href="#tab2">Horizon Zero Dawn</a>
										</br>
									</li>		
									<li class="nav_item">
										<a href="#tab3">Through Aloy's Eyes</a>
									</li>
								</ul>		
							</div>
					<img src="images/esrb.jpg" class="img3"/>	
					
				</div>
				<div class="rigcol">
				<button type="button" class="button2" id="modal_close" onclick="closeModal();">
					<img src="images/x.jpg">
				</button>
				<button type="button" class="button3">
					<img src="images/share.jpg">
				</button>
				<hr>
					<p class="Tfind"> Find <br/>US ON</p>
				</hr>
				<a href="https://www.facebook.com" class="fbshare">
					<img src="images/fb.jpg">
				</a>
				<a href="https://www.twitter.com" class="twshare">
					<img src="images/twit.jpg">
				</a>
				</div>
				<div class="footer">
					<img src="images/i.jpg" class="img1">
					<hr class="hr2">
						<p class="Thorizont">Click on Horizon Zero Dawn to see the next era of mankind</p>	
						<div class="learn">
							<p class="learnT"><a href="#learnmore">Learn More <strong> > </strong></a></p>
						</div>
				</div>
		</div>
	</div>

function closeModal(){
  var modal = document.getElementById('ModalOpen');
  modal.style.display = 'none';
}

function showModal(){
  var modal = document.getElementById('ModalOpen');
  modal.style.display = 'block';
}

window.addEventListener('load', function(){

}, false )

$(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);
  });
});
.Window {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0,0,0,0.7);
  z-index: 99999;
  transition: opacity 400ms ease-in;
  display: none;
  pointer-events: none;
}

.Window:target {
  display: block;
  pointer-events: auto;
}

.Window > div {
  width: 1030px;
  height:640px;
  position: relative;
  margin: 10px auto;
  background: url("images/background.jpg") no-repeat;
  background-position: 74px -50px;
  background-size:925px 640px;
  box-shadow: 0px 0px 20px 2px;
  background-color:white;
}
.share{
  position:absolute;
  right-12px;
  top:52px;
  left:992px;
}
.fbshare{
  position:absolute;
  right:-12px;
  top:509px;
  left:992px;
}
.twshare{
  position:absolute;
  right:-12px;
  top:546px;
  left:992px;
}
a{
  float:right;
  text-decoration:none;
  color:white;
}
.leftcol{
  width:200px;
  height:590px;
  margin-top:-590px;
  float:left;
  background: url("images/lcolb.jpg") no-repeat;

}
.rigcol{
  width:45px;
  height:590px;
  margin-top:-590px;
  float:right;
  background-color:white;

}
.footer{
  position:fixed;
  top:600px;
  background-color:black;
  width:1030px;
  height:50px;


}
.learn{
  position:relative;
  top:-59px;
  width:260px;
  height:50px;
  background-color:#0066cc;
  float:right;

}
.learnT{
  font-size:20px;
  margin-right:50px;
}
.learn:hover {background:#3399FF;}
.learn:hover a {color:#fff}
hr{
  background-color:black;
  position:fixed;
  top:462px;
  width:40px;
  height:1px;
  margin-left:3px;
  border:0;
}
.Tfind{
  margin-top:380px;
  font-size:8px;
  font-weight:bold;
  text-align:center;
}
.Thorizont{
  margin:0;
  position:relative;
  top:-20px;
  left:211px;
  color:white;
}
.hr2{
  width:1px;
  height:30px;
  background-color:white;
  position:absolute;
  margin-left:200px;
  top:0px;
}
.hr3{
  width:170px;
  position:absolute;
  top:226px;
  left:5px;
}
.img1{
  margin-left:86px;
  margin-top:10px;
}
.img1{
  margin-left:46px;
  margin-top:12px;
}
.img2{
  margin-top:89px;
  margin-left:15px;
}
.videocontent{
    width:785px;
    height:443px;
    margin-top:107px;
  }
  .button1{
    width:732px;
    height:90px;
    border:0;
    padding:0;
  }
  .button2{
    width:30px;
    height:30px;
    margin-top:7px;
    margin-left:8px;
    border:0;
    padding:0;
  }
  .button3{
    width:30px;
    height:30px;
    margin-left:7px;
    margin-top:16px;
    border:0;
    padding:0;
  }
  .menu{
    width:200px;
    height:135px;
    margin-left:15px;
    font-size:18px;
    margin-top:22px;
  }
  .nav {
    font: 12pt;
    list-style:none;
    padding:0;
    margin-top:22px;
    margin-left:9px;
    width:190px;
    height:45px;
    text-transform:uppercase;
  }
  .tabs
  {
    font: 12pt;
    list-style:none;
    padding:0;
    margin-top:22px;
    width:190px;
    height:45px;
    text-transform:uppercase;
  }
  .nav  li a {
    display:block;
    width:190px;
    height:45px;
    line-height:40px;
    background:#fff;
    color:#000000;
    cursor:pointer;
    transition: all 0.6s linear;

  }
  .nav li a:hover{
  transform: scaleY(1.2);
  }
  .img3{
    margin-top:55px;
    margin-left:35px;

  }
  .content{
    width:785px;
    height:490px;
  }
  .main{
    width:785px;
    height:590px;
    overflow:scroll;
    position:relative;
    margin-left:200px;
    position:relative;
  }
<a href="#ModalOpen" title="modal">
  <button type="button" class="button1" id="modal_close" onclick="showModal();">
    <img src="images/ban.jpg">
  </button>
</a>
<div id="ModalOpen" class="Window">
<div class="content">

<div class="main">
<section id="tab1">
  <video class="videocontent" controls poster="images/preview.jpg">
    <source src="images/ps.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
  </video>
</section>
<section id="tab2">
  <img src="images/background.jpg">
</section>
</div><!-- /main -->

<div class="leftcol">
  <img class="img1" src="images/ps4.jpg">
  <img class="img2" src="images/logo.jpg">
  <div class="tabs">
    <ul class="nav" id="menu">
    <li class="nav_item">
      <a href="#tab1">Video</a>
    </li>
    <li class="nav_item">
      <a href="#tab2">Horizon Zero Dawn</a>
      </br>
    </li>
    <li class="nav_item">
      <a href="#tab3">Through Aloy's Eyes</a>
    </li>
    </ul>
  </div><!-- /tabs -->
  <img src="images/esrb.jpg" class="img3"/>
</div><!-- /leftcol -->

<div class="rigcol">
  <button type="button" class="button2" id="modal_close" onclick="closeModal();">
    <img src="images/x.jpg">
  </button>
  <button type="button" class="button3">
    <img src="images/share.jpg">
  </button>
  <hr>
  <p class="Tfind"> Find <br/>US ON</p>
  </hr>
  <a href="https://www.facebook.com" class="fbshare">
    <img src="images/fb.jpg">
  </a>
  <a href="https://www.twitter.com" class="twshare">
    <img src="images/twit.jpg">
  </a>
</div><!-- /rigcol -->

<div class="footer">
  <img src="images/i.jpg" class="img1">
  <hr class="hr2">
  <p class="Thorizont">Click on Horizon Zero Dawn to see the next era of mankind</p>
  <div class="learn">
    <p class="learnT"><a href="#learnmore">Learn More <strong> > </strong></a></p>
  </div>
</div><!-- /footer -->

</div><!-- /content -->
</div><!-- /Window -->

Можно ли переписать такой код на javascript?

$(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);
  });
});
12
  • Элементы a внутри #menu могут динамически меняться или они всегда одни и те же?
    – andreymal
    6 апр 2017 в 9:13
  • jquery это библиотека Javascrpt. Все что можно сделать на jquery можно сделать и на чистом JS. так что ответ - можно.
    – teran
    6 апр 2017 в 9:13
  • 2
    code.tutsplus.com/tutorials/… посмотрите, почитайте и используйте то, что вам нужно.
    – Oleksandr
    6 апр 2017 в 9:15
  • @Oleksandr $('ul').on('click', 'a', fn) там некорректно реализован, если внутри a будут ещё какие-то элементы то это не сработает
    – andreymal
    6 апр 2017 в 9:19
  • 1
    Да, можно переписать, но ты получишь просто ужасную жопаболь особенно с отборкой элементов в JS все очень не сладко. Например document.getElmentsByTagName("a").onclick = function(){}; не сработает. Сработает только document.getElmentsByTagName("a")[0].onclick = function(){}. И меня это очень бесит, так как надо указывать отдельный элемент из возвращаемого массива.
    – Eugen Eray
    6 апр 2017 в 9:23

1 ответ 1

1

Вот и он:

 'use strict';

 function checkLoad() {
   var menu = document.getElementById('menu');

   function scroll(event) {
     var target = event.target;

     if (target.tagName != 'A') return;

     var id = document.querySelector(target.getAttribute('href'));
     var top = id.getBoundingClientRect().top + window.pageYOffset;

     if (document.body.scrollTop > top) {
       (function animate() {

         if (document.body.scrollTop >= top) {
           window.scrollBy(0, -1);
           setTimeout(animate, 20);
         }
         event.preventDefault();
         return;
       })();
     }

     if (document.body.scrollTop < top) {
       (function animate() {

         if (document.body.scrollTop <= top) {
           window.scrollBy(0, 1);
           setTimeout(animate, 20);
         }
         event.preventDefault();
         return;
       })();
     }
   }

   menu.addEventListener('click', scroll);
 }

 addEventListener('load', checkLoad);

  • Я точно не знаю как работает метод animate у jQuery, но я тестировал ваш код, считаю, что полностью добился анимации как в нем.
  • Ваш код мне показался странно работает, но вы просили перевести в js именно его.
  • Просьба, в следующий раз выкладывайте HTML и CSS более подготовленные(с загруженными картинками и т.д.).
2
  • что то не получилось , посмотрите на правильность написания моего кода
    – Calvin
    7 апр 2017 в 5:47
  • @Calvin Как я писал, ваш код на мой взгляд работает странно, я сделал аналогию на javascript, в своих комментариях вы просили именно этого(не смотреть на назначение скрипта), если что-то не так, то нужно вам описать что должно выполняться и как(для этого нужен корректный html и css). Могу посмотреть на вашем сайте. 7 апр 2017 в 11:39

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.