@YanaLins2018
веб-мастер

Плавный скролл по страницам сайта?

использую скрипт для плавного скролла
$("nav a.nav-link").click(function () {
// сохранили id из атрибута href
var id = $(this).attr('href');
var top = 0;
// если это не #
if (id != '#') {
// узнали положение нужного блока по отношению к левому верхнему углу страницы
top = $(id).offset().top;
}
// докручиваем страницу до нужной точки
$('html, body').animate({scrollTop: top}, 500);
// отменяем действие по умолчанию (переход по ссылке)
return false;
});

структура меню (часть):
https://jsfiddle.net/woq9v7wp/
при клике на ссылку переходит по якорю с лююой страницы, но без плавного скролла.

в консоли ошибка:
jquery-3.3.1.min.js:2 Uncaught Error: Syntax error, unrecognized expression: /o-kompanii/#about
at Function.oe.error (jquery-3.3.1.min.js:2)
at oe.tokenize (jquery-3.3.1.min.js:2)
at oe.select (jquery-3.3.1.min.js:2)
at Function.oe [as find] (jquery-3.3.1.min.js:2)
at w.fn.init.find (jquery-3.3.1.min.js:2)
at new w.fn.init (jquery-3.3.1.min.js:2)
at w (jquery-3.3.1.min.js:2)
at HTMLAnchorElement. (common.min.js:1)
at HTMLAnchorElement.dispatch (jquery-3.3.1.min.js:2)
at HTMLAnchorElement.y.handle (jquery-3.3.1.min.js:2)

в чем может быть причина? неправльно прописан селектор?
  • Вопрос задан
  • 674 просмотра
Решения вопроса 1
AskMy
@AskMy
иногда решаю задачки и задаю глупые вопросы
Ответ был прост , но решение надо поискать всё же так как отключить стандартное поведение ссылок и что бы работал переход я не знаю , но делюсь решением что мне доступно

1 страница :
index.html
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  topicstarter</title>
  <style> 
*{
  margin:0;
  padding:0;
  -webkit-box-sizing:border-box;
          box-sizing:border-box;
}
ul{
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  position: fixed;
  -webkit-box-align:center;
      -ms-flex-align:center;
          align-items:center;
  top:0;
  background:lightblue;
  width:100%;
  height:40px;
}
li{
  margin-left:10px;
  list-style:none;
}
a{
  font-size:1.4em;
  text-decoration:none;
}
.item{
  width:100vw;
  height:500px;
  margin-top:40px;
  padding-top:60px;
}
#item1{
background:red;  
}
#item2{
background:green;  
}
#item3{
background:blue;  
}
a:hover{
  color:yellow;
}
</style>
</head>

<body>
  <ul>
  <li><a href="page.html#section3">другая страница секция 3</a></li>
  <li><a href="#item1">секция 1 на этой странице</a></li>
  <li><a href="#item2">секция 2 на этой странице</a></li>
  <li><a href="#item3">секция 3 на этой странице</a></li>
</ul>

<div id="item1" class="item">15</div>
<div id="item2" class="item">25</div>
<div id="item3" class="item">35</div>

   
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
   <script> 
    $(document).ready(function(){
      $("ul").on("click","a", function () {
        var id  = $(this).attr('href'),
          top = $(id).offset().top;
        $('body,html').animate({scrollTop: top}, 500);
      });
    });

    var myHash = location.hash; 
    location.hash = ''; 
    if(myHash[1] != undefined){ 
        $('html, body').animate({scrollTop: $(myHash).offset().top}, 500); 
    };
  </script>
</body>

</html>

2 страница :
page.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style> 
		*{
		margin:0;
		padding:0;
		-webkit-box-sizing:border-box;
		      box-sizing:border-box;
		}
		ul{
			display:flex;
			position: fixed;top:0;width:100%;height:50px;align-items: center;background:#fff;
		}
		li{
			margin-left:10px;
			list-style-type: none;
		}
		a{
			font-size:1.3em;
			text-decoration: none;
		}
		a:hover{
			color:red;
		}
		.item{
			width:100vw;
			height:500px;
		}
		#section1{
		 background:red;
		}
		#section2{
		 background:green;
		}
		#section3{
		 background:blue;  	
		}
	</style>

</head>
<body>
	  <ul>
  <li><a href="index.html#item1">index.html item1</a></li>
  <li><a href="#section1">секция 1 на этой странице</a></li>
  <li><a href="#section2">секция 2 на этой странице</a></li>
  <li><a href="#section3">секция 3 на этой странице</a></li>
</ul>
	<div id="section1" class="item">
		Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Подпоясал на берегу своих предупреждал страна злых напоивший свое живет, жаренные всеми оксмокс. Единственное не свое коварных вскоре, залетают толку даже запятой семантика за, раз текстов щеке взобравшись своих языкового всеми там наш города? Жизни предложения деревни жаренные над ты, напоивший!
	</div>
	<div id="section2" class="item">
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi quos nam dicta iusto, odio quidem, ad culpa ullam nemo odit vitae soluta facere aut optio ipsam maiores fuga aliquam accusantium autem, obcaecati perferendis quae rerum laudantium, molestias nesciunt? Voluptates, quisquam minima, voluptas laborum aperiam nam! Impedit, nam laboriosam facere amet!
	</div>
	<div id="section3" class="item">
		Mujer uno dolor más de, poder mismo si. Paria modo permacultura amanecer repugnante dolor alma triste preferencia almácigo décima belleza ataque namibia laudo culpa encefalograma marejada analfabeto, falda pan. Accesorio débito casi sed demonio yugo, modo, propósito! Natividad triste dulce, menos fugacidad números, y apéndice décima lejos abogada, alma asunción.
	</div>




   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
   <script> 
	  $(document).ready(function(){
	    $("ul").on("click","a", function () {
	      var id  = $(this).attr('href'),
	        top = $(id).offset().top;
	      $('body,html').animate({scrollTop: top}, 500);
	    });
	  });

		var myHash = location.hash; 
		location.hash = ''; 
		if(myHash[1] != undefined){ 
		    $('html, body').animate({scrollTop: $(myHash).offset().top}, 500); 
		};
	</script>

</body>
</html>


предосмотр : lensky-preview.github.io/scroll/
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы