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

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


Recommended Posts

Ставлю якорь 

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

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

Link to post
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 post
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 post
Share on other sites

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

<a href="тут ссылка на страницу#block">Якорь</a>
Link to post
Share on other sites
Только что, fanatic сказал:

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


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

 

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

Link to post
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 post
Share on other sites
2 минуты назад, Tom сказал:

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

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

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

 

Link to post
Share on other sites
17 минут назад, qpldl сказал:

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

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

 

Link to post
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 post
Share on other sites

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

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

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

Link to post
Share on other sites
Только что, fanatic сказал:

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

 

видимо base

  • +1 1
Link to post
Share on other sites
12 минут назад, spectre сказал:

видимо base

не понял

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

Link to post
Share on other sites
51 минуту назад, fanatic сказал:

не понял

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

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

Link to post
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 post
Share on other sites

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

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

 

Edited by Prooksius
Link to post
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 post
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
  • 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.