Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
  • Sign Up

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


 Share

Recommended Posts

Ставлю якорь 

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

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

Link to comment
Share on other sites


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>
Edited by bodyak0
Link to comment
Share on other sites


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>

 

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

Link to comment
Share on other sites


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

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

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

 

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

Link to comment
Share on other sites


Как вариант, в 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>

 

  • +1 1
Link to comment
Share on other sites

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

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

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

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

 

Link to comment
Share on other sites

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

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

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

 

Link to comment
Share on other sites

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>

 

 

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

Link to comment
Share on other sites


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

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

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

Link to comment
Share on other sites

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

не понял

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

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

Link to comment
Share on other sites

  • 4 months later...
В 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 спасибо! ваше решение работает, но не переключаются табы.

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

Link to comment
Share on other sites


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

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

 

Edited by Prooksius
Link to comment
Share on other sites

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

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

 

Edited by Prooksius
  • +1 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.