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

[qpldl]

Ставлю якорь 

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

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

[bodyak0]

  В 11.09.2020 в 07:37, qpldl сказав:

Ставлю якорь 

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

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

Expand  

через 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]

  В 11.09.2020 в 08:04, 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>

Expand  

 

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

[fanatic]

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

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

[qpldl]

  В 11.09.2020 в 08:14, fanatic сказав:

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

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

Expand  

 

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

[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]

  В 11.09.2020 в 08:24, Tom сказав:

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

Expand  

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

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

 

[fanatic]

  В 11.09.2020 в 08:15, qpldl сказав:

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

Expand  

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

 

[qpldl]

  В 11.09.2020 в 08: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>

 

Expand  

 

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

[fanatic]

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

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

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

[spectre]

  В 11.09.2020 в 08:37, fanatic сказав:

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

Expand  

 

видимо base

[fanatic]

  В 11.09.2020 в 08:38, spectre сказав:

видимо base

Expand  

не понял

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

[fanatic]

  В 11.09.2020 в 08:51, fanatic сказав:

не понял

Expand  

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

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

[antiuser]

  В 11.09.2020 в 08: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>

 

Expand  

 

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