Возможен ли переход по якорям на странице без ссылок а?

341

19 июня 2017, 22:29

У меня кнопка "вверх" http://joxi.ru/Y2LqlnGu3P0wA6 сделана ссылкой:

<div class="to-top col-md-2 col-sm-4">
    <a href="#top" class="btn">Наверх</a>
</div>

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

Вот чего хотелось бы:

<div class="to-top col-md-2 col-sm-4">
    <span data-target="top" class="btn">Наверх</span>
</div>

Answer 1

for(const el of document.querySelectorAll('*[data-target]')){ 
    const target = document.querySelector(`*[data-ankor="${el.dataset.target}"]`); 
    el.addEventListener('click', e => target.scrollIntoView(true)); 
}

<div class="to-top col-md-2 col-sm-4"> 
    <span data-target="top" class="btn">Туда</span> 
</div> 
<div class="to-top col-md-2 col-sm-4"> 
    <span data-ankor="top" class="btn">Сюда</span> 
</div>

Answer 2

Спасибо комментаторам за ответы, на основе их я нарыл хороший пример той прокрутке, которую я желал:

$(function(){
    $('#to-top-btn').on('click', function(e){
        $('html,body').stop().animate({ scrollTop: $('body').offset().top }, 1000);
        e.preventDefault();
    });
});

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

JavaScript Array/ Delete a specific object from array/ Add a new object

Всем добрый вечер) Друзья уже мозг кипит, нужна ваша помощьУ меня 3 задания на выполнения для того что бы приняли на internship в одной компаний

321

javascript

Как начать работать с npm и babel?

ПриветУ меня возникла проблема

282

javascript

Как импортировать npm-модули при помощи require.js?

ПриветКак правильно импортировать модули npm в браузер? Использую npm с Babel, где после установки модуля я прописал import 'webpack';, что в транспилированном...

365

javascript

Как получить листинг директории с chrome extension api

Любым способом, с любыми разрешениями

418