Как сделать, чтобы при переходе по ссылке открывалось определенное положение страницы?

Question

[Александр Лебедь]

Здравствуйте.
Помогите пожалуйста сделать так, чтоб при переходе по ссылке открывалось нужное положение страницы (желательно без якорей).
Заранее большое спасибо.

Comments

[Александр Лебедь]

В принципе я как понял то вот так?

<a class="scroll" href="post.html#block">Block</a>

<div id="block">Тут что-то</div>

$(".scroll").click(function(event){
event.preventDefault();
//calculate destination place
var dest=0;
if($(this.hash).offset().top > $(document).height()-$(window).height()){
dest=$(document).height()-$(window).height();
}else{
dest=$(this.hash).offset().top;
}
//go to destination
$('html,body').animate({scrollTop:dest}, 1000,'swing');
});

Правильно ли это? И если да, то как сделать чтоб не добавлялся этот якорь #block в строке браузера?

Или этот правильнее?

$(function() {
  $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });
});

Но снова же вопрос как убрать чтоб якорь в строке не отображался?

[Михаил Тихонин]

Если Вы хотите, чтобы при клике по ссылкам не происходило переходов, а просто скроллировалась текущая страница, то вам в href можно ничего не писать, а просто на обработчик клика по ссылке повесить функцию скроллирования. Тогда URL в адресной строке меняться не будет.

[Александр Лебедь]

Михаил Тихонин: Не мне нужно сделать так чтоб именно при переходе по ссылки на другую страницу, скролилась именно она, но без добавления якоря в строку, возможно такое ?

[Михаил Тихонин]

Александр Лебедь: Возможно, но Вам же надо как-то передать информацию куда именно скролить? Якорь Вы использовать почему-то не хотите, значит можно использовать параметр GET, т е переменную, идущую в URL после '?'. На целевой странице можно распарсить location.search, получить значение нужной вам переменной и после этого скролить.
Хотя я бы лучше якорь использовал.

[Александр Лебедь]

Михаил Тихонин: Я понял, еще вопрос, влияют как-то на индексацию якоря или нет?

[Михаил Тихонин]

Александр Лебедь: Моё мнение - не должны влиять, но это лучше у спецов по SEO спросить.

Answer 1

[Михаил Тихонин]

Ну если без якорей, то можно на js сделать

jQuery(document).ready(function(){
var destination = jQuery(elem).offset().top;
jQuery("html,body").animate({scrollTop: destination}, speed);
});

Пишу по памяти, простите за возможные косяки, но принцип такой.

Comments

[Александр Лебедь]

Спасибо, а как это все к ссылки прикрепить чтоб страница которая открывалась скролила до определенного места, и как его задать в этой функции не подскажите?

[Михаил Тихонин]

Александр Лебедь: У меня тут страница скроллируется к элементу elem со скоростью speed. Как Вы будете выбирать конкретный элемент, это другой вопрос, можно например анализировать URL с помощью объекта location.

Answer 2

[Владимир Горбунов]

есть крутой плагин

$("a[href*='#']").mPageScroll2id();

вроде того что предложили выше

Comments

[Александр Лебедь]

Спасибо, но остается открытым вопрос, как сделать так чтоб в браузерной строке, не добавлялся пр переходе на другую страницу якорь типа #block

[Владимир Горбунов]

Александр Лебедь: ну насколько я знаю, этот плагин не добавляет якоря. вот пример страницы где используют этот плагин dev.webdesign-master.ru/_wp_html

[Александр Лебедь]

Владимир Горбунов: Это если на этой же странице переход, а если на другую то якорь добавляется

[Владимир Горбунов]

Александр Лебедь: я ну может быть! надо почитать документацию может там описывают этот момент

Answer 3

[Dmitriy Mozgovoy]

можно:
- использовать native механизмы якорей
- использовать якори для передачи координат или селектора на страницу с последующим разбором скриптом и прокруткой
- кукистные костыли

выберем второй:
Скрипт может парсить переменный x/y или scrollTo=selector и прокручивает страницу

также позволяет делать тоже самое в пределах одной страницы, и как бонус парсит переменные с hash

<a href="#x=123&y=100">Scroll to  x/y</a>
     <a href="#scrollTo=#scrollID">ScrollTo element selector (id)</a>
     <a href="#scrollTo=.class">ScrollTo element selector (class)</a>
    <a href="path/to/page.php#scrollTo=.class">ScrollTo element selector (class)</a>

function decodeScrollPos(hide) {
             var params = {}, el, loc = window.location, hash = loc.hash.substr(1);

             hide && (loc.hash = "");

             hash.split('&').forEach(function (raw) {
                 var data = raw.split('=');
                 data[0] && (params[data[0]] = data[1] || "");
             })
             setTimeout(function () {
                 if (params.x || params.y) {
                     console.log('scroll=', hash);
                     window.scrollTo(params.x, params.y);
                 } else if (params.scrollTo) {
                     (el = document.querySelector(params.scrollTo)) && el.scrollIntoView && el.scrollIntoView(true);
                 }
             }, 100);
             return params;
         }


         window.onhashchange = function () {
             decodeScrollPos(true);
         }

         console.log(decodeScrollPos(true));

Если хотите не показывать hash в адресе после перехода после скроллинга можно его обнулить ..но зачем
window.location.hash="";

Comments

[Александр Лебедь]

Спасибо большое,я просто в в этом не сильно силен, после чего именно дописать window.location.hash=""; ?

[Dmitriy Mozgovoy]

после вызова decodeScrollPos();

[Александр Лебедь]

Дмитрий: Огромное вам спасибо

[Александр Лебедь]

Дмитрий: Попробовал, но не скрывает

[Dmitriy Mozgovoy]

Александр Лебедь: чуть подправил, но все ровно все эти костыли полностью не уберут с адреса hash- останется в конце символ #. Зачем его вообще понадобилось "скрывать"?

[Александр Лебедь]

Дмитрий: Спасибо большое

[alc0]

А анимацию перехода можно осуществить здесь??

Answer 4

[ram_prv]

Вопрос конесно скользкий. Все тут знатоки javascript.
ф как быть в ситуации когда идет отбор с прпименением izotop, а привыводе формируется новая страница?

<?php if ($categories && param('useGalleryGategory', 0)) : ?>
	<ul id="catalog_categories" class="our_project_filter">
		<li  data-filter="*"><a href="/gallery">All</a></li>
		<?php foreach ($categories as $key => $item) :?>
		
			<li class="segment-<?php echo $item->id; ?>">
				<a href="<?php echo GalleryCategory::getCatIdUrl($item->id, $item->title); ?>"><?php echo $item->title; ?></a>
			</li>
		<?php endforeach; ?>
	</ul>
<?php endif; ?>

это код кнопок.
Это то что мы должны получить :

<?php if($gallery) : ?>
 
	 <?php foreach ($gallery as $item) : ?>
                    <div class="segment-<?php echo $item->id_category;?> col-md-4">
                       
                            <ul>
								
								<li><?php if ($item->img):?>
					<a href="<?php echo Yii::app()->request->baseUrl.'/'.Gallery::UPLOAD_DIR.'/'.Gallery::GALLERY_DIR.'/'.Gallery::ORIGINAL_IMG_DIR.'/'.$item->img; ?>" >
				<?php else: ?>
					<a href="<?php echo Gallery::returnEmptyImgUrl(param('maxWidthBigThumb', 800), param('maxHeightBigThumb', 600));?>">
				<?php endif; ?>

					<?php
					if ($item->img):
						echo CHtml::image(Yii::app()->getBaseUrl().'/'.Gallery::UPLOAD_DIR.'/'.Gallery::GALLERY_DIR.'/'.Gallery::MODIFIED_IMG_DIR.'/'.$item->getThumb(param('maxWidthMediumThumb', 400), param('maxHeightMediumThumb', 300)));
					else:
						echo CHtml::image(Gallery::returnEmptyImgUrl(param('maxWidthMediumThumb', 436), param('maxHeightMediumThumb', 273)));
					endif;
					?>
						</li>
						</ul>
								</div>
							
							
					

<?php endforeach;?>
<?php else: ?>
	<div><?php echo tc('Нет изображений в галерее');?></div>
<?php endif; ?>

<?php if($pages) : ?>
	<?php $this->widget('itemPaginator',array('pages' => $pages, 'header' => '')); ?>
	<div class="clearfix"></div>
<?php endif;?>

Все работае, но при переходе мы возращаемся в начало строки, тоесть к тегу<html>. Как вернуть перход к кнопкам

<ul id="catalog_categories" class="our_project_filter">

?