Как убрать #lorem из URL
Проблема в следующем. На сайте реализованы плавные якорные ссылки через https://github.com/cferdinandi/smooth-scroll Я дилетант в джаваскрипте и jQuery, поэтому не могли бы вы, пожалуйста, подсказать, каким образом можно реализовать это не через hash или как убрать «#»?
Отслеживать
задан 15 фев 2017 в 18:01
Alexander Demchenko Alexander Demchenko
75 7 7 бронзовых знаков
А чем мешает # в ссылках?
15 фев 2017 в 20:07
imgur.com/a/gvhTq Просто хочется, чтобы было реализовано без решётки, как на всех сайтах.
16 фев 2017 в 6:53
2 ответа 2
Сортировка: Сброс на вариант по умолчанию
Этот плагин специально построен таким образом, чтобы обрабатывать переход по кликам сохраняя их в историю. Если вам нужен просто плавный переход, может проще сделать его самому? Вот пример кода, он очень простой:
$('body').on('click', '.smooth-scroll-class', function()< //по href ищем элемент с нужным id и определяем его позицию pos = $( $(this).attr('href') ).offset(); if (pos) < //скролим на эту позицию $("html, body").animate(, 600); //отключаем стандартный переход по ссылке return false; > >) Так можно сделать ссылку не на a на Те не надо создавать якоря, достаточно прописать id нужному элементу.
Можно так-же и искать якорь
$('body').on('click', '.smooth-scroll-class', function()< //по href ищем якорь с нужным именем pos = $('a[name=' + $(this).attr('href').replace(/^#/,'') + ']').offset(); if (pos) < //скролим на эту позицию $("html, body").animate(, 600); //отключаем стандартный переход по ссылке return false; > >) Живой тест:
$('body').on('click', '.smooth-scroll', function() < pos = $('a[name=' + $(this).attr('href').replace(/^#/,'') + ']').offset(); if (pos) < $("html, body").animate(< scrollTop: pos.top >, 600); return false; > >)
Как убрать якорь (#, hash, хэш, решетку) в URL?
Ситуация следующая:
есть сайт на некой CMS, на нем страница формы заказа по адресу /zakaz/, после нажатия на кнопку «Отправить» юзер средствами CMS перенаправляется на страницу /zakaz/ok/. Когда-то на непосредственно форму стоял html-якорь #form (чтобы страница по адресу /zakaz/#form отображалась начиная с первой строки формы). Позже стало понятно, что если юзер заполняет форму с урл в браузере /zakaz/#form — форма отрабатывает некорректно (нет перенаправления).
Задача — при заходе юзера по адресу /zakaz/#form менять урл в его браузере на /zakaz/
Возможно ли это сделать? Правильно ли я понимаю, что, поскольку к серверу идет запрос только /zakaz/, а #form обрабатывается уже на клиенте, ни php, ни mod_rewrite через .htaccess не помогут, т.е. только средствами javascript?
- Вопрос задан более трёх лет назад
- 34267 просмотров
Комментировать
Решения вопроса 0
Ответы на вопрос 6
веб-программист
Вопрос конечно устаревший, ну пока ответ под рукой отвечу. Может кому пригодится.
history.pushState('', document.title, window.location.pathname);5 способов создания ссылок-якорей с отступом сверху. Устранение смещения из-за фиксированного блока (шапка, меню).
Впервые я столкнулся с этим, когда делал на своем сайте выплывающую панель «Поделиться в соц сетях» при скролле поста вниз (попробуйте).
При использовании ссылок-якорей на сайте, после перехода по ссылке, панель соц сетей закрывала верхнюю часть контента (как правило заголовок) и в итоге пользователю просто было непонятно, куда он в итоге попал. Вы можете опробовать это сами, кликнув по ссылке «A» ниже.
А так как сейчас очень популярно делать фиксированные шапки и меню position:fixed , прилепленные к верхней части экрана, то думаю что этот пост будет интересен многим. В нём я рассмотрю несколько вариантов якорей с отступами от верхней границы экрана при переходе по ним.
- A: Стандартный якорь
- Б: Отступ в виде псевдоэлемента
- В: Положительный padding и отрицательный margin
- Г: Border и отрицательный margin
- Д: Метод Г с возможностью добавления border-top
Для более ясного понимания на все h2 -заголовки я добавил заливку.
A: Стандартный якорь
Пример того, как работает стандартная ссылка-якорь. Если вы попали сюда, кликнув по ссылке, а не просто проскроллили страницу, то скорее всего заголовок у вас оказался полностью скрыт под панелью соц сетей.
Возможно было бы правильнее назвать пост не «5 методов…», а «4 метода…». Потому что это и не метод вовсе, а показательный пример того, как быть не должно, ну да ладно.
Б: Отступ в виде псевдоэлемента
Используем псевдоэлемент для добавления отступа перед элементом — :before или :after .
Поддержка браузерами: Chrome конечно же, IE8+, Firefox 3+, Opera 9.25+, Safari 3+.
Замечания:
- Требуется поддержка браузером CSS псеводоэлементов.
- Метод не работает корректно, если у элемента есть фон или заливка (наезжает на контент).
- Не работает корректно, если у элемента есть свойства padding-top или border-top .
#link-B:before { display: block; content: ""; height: 55px; margin: -55px 0 0; }
В: Положительный padding и отрицательный margin
Используем padding для создания отступа и отрицательный margin , чтобы этот же отступ убрать, а точнее — сделать его незаметным для пользователей.
Обратите внимание, что внутренные отступы padding тоже попадают под заливку, то есть, если у вашего элемента будет фон, то он скорее всего наедет на контент перед ним. Для того, чтобы игнорировать padding при добавлении фона на элемент, используйте CSS-свойство background-clip:content-box .
Поддержка браузерами: Chrome конечно же, Firefox 4.0+, Opera 10.6+, Safari 3+.
Замечания:
- Необходима поддержка браузером background-clip:content-box , но это только в том случае, если вы хотите добавить фон элементу.
- Некоторые ограничения при использовании margin (в том числе при margin-collapse — это когда из нижнего отступа первого элемента и верхнего отступа второго определяется наибольший, который и становится величиной отступа между этими элементами).
- Невозможность использования padding-top .
#link-C { padding-top: 55px; margin-top: -55px; -webkit-background-clip: content-box; background-clip: content-box; }
Г: Border и отрицательный margin
По сути то же самое, что и предыдущий метод, но вместо padding используем border . Что это нам даёт?
- Теперь вы спокойно можете использовать внутренние отступы padding .
- Постараюсь выразиться правильно — по идее border — это тот же padding , но только с заливкой и эффектами. Поэтому при использовании фона или заливки элемента нам нужно учесть, чтобы она распростаранялась на сам элемент и на padding , но не на border (ведь он то у нас прозрачный), здесь поможет background-clip:padding-box .
- Ограничение в использовании border-top , которое однако легко решаемо — смотрите ниже.
Поддержка браузерами: Chrome конечно же, Firefox 1.0+, Opera 10.5+, Safari 3+.
#link-D { border-top: 55px solid transparent; margin-top: -55px; padding: 15px; /* паддинги - без проблем */ -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; }
Д: Метод Г с возможностью добавления border-top
Дополнение к предыдущему методу, которое позволит добавить на элемент верхний border . Поддержка браузерами псевдоэлементов и background-clip (только при наличии фона или заливки) обязательна.
Поддержка браузерами: Chrome конечно же, Firefox 3.5+, Opera 10.5+, Safari 3+.
#link-E { position: relative; /* важно - для того, чтобы псевдоэлемент позиционировался относительно этого элемента */ border-top: 55px solid transparent; margin-top: -55px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; } #link-E:before { content: ""; position: absolute; top: -2px; /* равен по модулю толщине border */ left: 0; right: 0; border-top: 2px solid #ccc; /* собственно то, ради чего всё затевалось */ }
Смотрите также
- Треугольники, стрелки, квадраты и лимон при помощи свойств CSS border и border-radius
- Удобный CSS оптимизатор для работы на каждый день
Миша
Впервые познакомился с WordPress в 2009 году. Организатор и спикер на конференциях WordCamp. Преподаватель в школе Нетология.
Пишите, если нужна помощь с сайтом или разработка с нуля.
Удаление якоря при нажатии на ссылку
Очередное небольшое решение на javascript, которое позволяет удалять якорь при нажатии на ссылку. В моей практике встречаются ситуации, когда я использую якоря в ссылках для перемещения пользователя на конкретные элементы текущей страницы. После перемещения якорь остается в браузерной строке. Именно этот якорь я и буду удалять.
Читатель может спросить, а зачем вообще его удалять? Для меня существует несколько причин для этого. Во-первых, при обновлении страницы, если якорь не будет удален, пользователь снова будет перенаправлен на какой-то элемент, который ему может быть уже и не нужен. Во-вторых, это не эстетично, что после отработки события якорь остается. Для меня этих причин уже достаточно, чтобы найти решение.
Итак, у нас есть ряд ссылок, в которых присутствуют якоря и при нажатии на которые мы не хотим, чтобы якорь попадал в URL. При этом, если при нажатии на данную ссылку якорь уже есть, мы его будем удалять, но сразу оговоримся, что данное такое поведение должно применяться только к ссылкам, у которых назначены якоря. Не буду приводить пример полного меню, возьмем только один элемент:
Воспользуемся следующим кодом на javascript, только не забудьте, что должна быть подключена библиотека jQuery:
$('.test').click(function(e)< var anch = this.hash.slice(0); if(!anch || !anch[0] === "#") return; e.preventDefault(); window.location.hash = ''; var offset = $(anch).offset(); $("html, body").animate(,100); if(history.pushState) < history.pushState(<>, null, window.location.pathname); > >);Небольшие пояснения по коду. Мы получаем якорь из текущей ссылки. Если ссылка не содержит якорь или что-то пошло не так, мы возвращаемся к нормальному выполнению клику по ссылке. Если же якорь имеется, то мы останавливаем переход по ссылке (e.preventDefault()) и обнуляем имеющийся на данной странице якорь (window.location.hash = »;). После этого мы переходим на нужный нам элемент id который должен соответствовать коду полученного от ссылки якоря. После чего, если браузер поддерживает history.pushState, то мы обновляем текущую историю, убирая из нее якорь.
Вот такая вот реализация данного функционала. Надеюсь кому-то пригодится 🙂