Как поставить якорь на нужный блок в карточке?

[qpldl]

Ставлю якорь 

<a href="#block">Якорь</a>

хочу сделать прокрутку до нужного блока в карточке
меня перенаправляет по такой ссылке
site.com/#block
не могу понять по какой причине перенаправляет на главную с якорем а не просто на якорь в карточке

[bodyak0]

27 хвилин назад, qpldl сказав:

Ставлю якорь 

<a href="#block">Якорь</a>

хочу сделать прокрутку до нужного блока в карточке
меня перенаправляет по такой ссылке
site.com/#block
не могу понять по какой причине перенаправляет на главную с якорем а не просто на якорь в карточке

через id делать нужно, а не так как вы.

 

<style>
html {
  scroll-behavior: initial; /* свойство scroll-behavior не наследуется, применяется к прокручиваемым блокам */ 
}
</style>

<a href="#page1">НАЖАТЬ1</a>&emsp;
<a href="#page2">НАЖАТЬ2</a>&emsp;
<a href="#page3">НАЖАТЬ3</a>&emsp;
<div id="page1">1<br>11<br>111</div>
<div id="page2">2<br>22<br>222<br>2222<br>22222<br>222222<br>2222222</div>
<div id="page3">3<br>33<br>333<br>3333</div>

Змінено 11 вересня 2020 користувачем bodyak0

[qpldl]

8 минут назад, bodyak0 сказал:

через id делать нужно, а не так как вы.

 

<style>
html {
  scroll-behavior: initial; /* свойство scroll-behavior не наследуется, применяется к прокручиваемым блокам */ 
}
</style>

<a href="#page1">НАЖАТЬ1</a>&emsp;
<a href="#page2">НАЖАТЬ2</a>&emsp;
<a href="#page3">НАЖАТЬ3</a>&emsp;
<div id="page1">1<br>11<br>111</div>
<div id="page2">2<br>22<br>222<br>2222<br>22222<br>222222<br>2222222</div>
<div id="page3">3<br>33<br>333<br>3333</div>

 

так я так и делаю, не работает

[fanatic]

попробуйте с адресом страницы

<a href="тут ссылка на страницу#block">Якорь</a>

[qpldl]

Только что, fanatic сказал:

попробуйте с адресом страницы

<a href="тут ссылка на страницу#block">Якорь</a>

 

а как адрес каждого продукта подставить?

[Tom]

Как вариант, в product.tpl перед <?php echo $footer; ?> , добавить

			<script>
				  $(document).ready(function(){
					  $('a[href^="#"]').click(function(){
						if(document.getElementById($(this).attr('href').substr(1)) != null) { 
						   $('html, body').animate({ scrollTop: $($(this).attr('href')).offset().top }, 500);
						}     
						return false;
					  });
				  });
			</script>

 

[fanatic]

2 минуты назад, Tom сказал:

Как вариант, в product.tpl перед <?php echo $footer; ?> , добавить

это да, как вариант

 но, почему не работают якоря, без ссылки на страницу?

 

[fanatic]

17 минут назад, qpldl сказал:

а как адрес каждого продукта подставить?

$this->url->link('product/product', 'product_id=' . $product_info['product_id'])

 

[qpldl]

11 минут назад, Tom сказал:

Как вариант, в product.tpl перед <?php echo $footer; ?> , добавить

			<script>
				  $(document).ready(function(){
					  $('a[href^="#"]').click(function(){
						if(document.getElementById($(this).attr('href').substr(1)) != null) { 
						   $('html, body').animate({ scrollTop: $($(this).attr('href')).offset().top }, 500);
						}     
						return false;
					  });
				  });
			</script>

 

 

Спасибо! Работает

[fanatic]

что интересно, на обычной  html странице(без движка), все работает

в движке, без ссылки на страницу, ни в какую. 

чего я не знаю?

[spectre]

Только что, fanatic сказал:

чего я не знаю?

 

видимо base

[fanatic]

12 минут назад, spectre сказал:

видимо base

не понял

намек на основы, или что?

[fanatic]

51 минуту назад, fanatic сказал:

не понял

дошло, спасибо 

получается, сам того не зная, я правильно посоветовал в первом своем сообщении, переопределить base(добавить ссылку перед якорем)

[antiuser]

В 11.09.2020 в 11:24, Tom сказал:

Как вариант, в product.tpl перед <?php echo $footer; ?> , добавить

			<script>
				  $(document).ready(function(){
					  $('a[href^="#"]').click(function(){
						if(document.getElementById($(this).attr('href').substr(1)) != null) { 
						   $('html, body').animate({ scrollTop: $($(this).attr('href')).offset().top }, 500);
						}     
						return false;
					  });
				  });
			</script>

 

 

Tom спасибо! ваше решение работает, но не переключаются табы.

Не сталкивались как решить этот недостаток?

[Prooksius]

Можно попробовать имитировать нажатие на соотв. ссылку таба после окончания прокрутки:
Примерно так:

$('html, body').animate({ scrollTop: $($(this).attr('href')).offset().top }, 500, function() {
    // здесь выполняется код после окончания анимации.
	$('---тэг ссылки на нужный таб---').trigger('click');
});

 

Змінено 17 січня 2021 користувачем Prooksius

[Prooksius]

аа, неправильно понял сначала.
 

<script>
  $(document).ready(function(){
    $('a[href^="#"]').click(function(){
      if ($(this).attr('data-toggle') == 'tab') { // проверяет, не является ли эта ссылка - табом
      	return true;
      }
      if(document.getElementById($(this).attr('href').substr(1)) != null) { 
        $('html, body').animate({ scrollTop: $($(this).attr('href')).offset().top }, 500);
      }     
      return false;
    });
  });
</script>

 

Змінено 17 січня 2021 користувачем Prooksius