Прокрутка с якорем без # по URL

Мне нужно прокрутить страницу, используя anchor tag.

Сейчас я делаю:

<a href="#div1">Link1</a>

<div id='div1'>link1 points me!!</div>

Это отлично работает, когда я нажал ссылку Link1, страница прокручивается до div с id "div1".
Дело в том, что я не хочу менять свой URL, который принимает #div как суффикс после того, как я нажал на Link1.

Я пробовал с привязкой href как

void(0);

location.hash='#div1';
return false;

e.preventdefault;

Как избежать изменения URL-адреса?

Ответ 1

Возьмите этот ответ от Джеффа Хайнса, используя анимацию jQuery:

function goToByScroll(id){
    $('html,body').animate({scrollTop: $("#"+id).offset().top},'slow');
}

Если вы используете jQuery, не забудьте добавить библиотеку в свой проект.

Изменить: также убедитесь, что вы все еще "возвращаете false"; в обработчике кликов для ссылки, иначе он все равно добавит "# div1" к вашему URL-адресу (спасибо @niaccurshi)

Ответ 2

scrollIntoView выполнил наилучшую работу, когда все остальные методы не удались!

document.getElementById('top').scrollIntoView(true);

Где 'top' - идентификатор тега html, который вы хотите удалить.

Ответ 3

Сделайте свою жизнь проще, попробуйте следующее и сообщите мне, если есть что-то еще: -)

<div>top</div>
<div style="height: 800px;">&nbsp;</div>
<div><a href="javascript:void(0);" onclick="window.scroll(0,1);">click here</a></div>

FYI: Вам нужно играть только с одной/одной строкой href="javascript:void(0);" onclick="window.scroll(0,1);", и он работает для вас.

Хорошего дня!

Ответ 4

Не обращая внимания на ответ от Henser, у меня есть случай, когда window.location.hash уже установлен, и пользователь затем прокручивает назад до верхней части страницы (где находится ссылка на хэш).

Поскольку хэш уже установлен, вы можете переместить его, нажав на эту ссылку:

$(window).scrollTop($('a[name='+id+']').offset().top);

Ответ 5

Добавить только этот код в jquery на готовом документе

Ссылка: http://css-tricks.com/snippets/jquery/smooth-scrolling/

$(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;
      }
    }
  });
});

Ответ 6

Я знаю, что я опаздываю на 4 года, но вы, ребята, можете попробовать это.

HTML:

<a href="#div1">Link1</a>
<!-- you can put <br /> here to see effect -->
<div id='div1'>link1 points me!!</div>
<!-- <br /> here, too, to see effect -->

JavaScript/JQuery

$(document).ready(function(){
    $('a').on('click', function(event) {
        event.preventDefault();
        var hash = this.hash;
        $('html, body').animate({scrollTop: $(hash).offset().top}, 900);
    });
})

Ответ 7

Добавить плавную прокрутку к любому элементу, включая привязку, кнопку и т.д., Без добавления идентификатора div в URL :)

Информация: scrollIntoViewOptions (Необязательно) {поведение: "авто" | "мгновенный" | "гладкий", блок: "старт" | "конец", }

function scrollSmoothTo(elementId) {
  var element = document.getElementById(elementId);
  element.scrollIntoView({
    block: 'start',
    behavior: 'smooth'
  });
}

#userdiv {
  margin-top: 200px;
  width: 200px;
  height: 400px;
  border: 1px solid red;
}

<button onclick="scrollSmoothTo('userdiv')">
  Scroll to userdiv
</button>

<div id="userdiv">
  Lorem ipsum this is a random text
</div>