Хобрук: Ваш путь к мастерству в программировании

Как использовать якорные ссылки в элементах внутри md-контента?

Недавно я переключился на материал Angular для веб-сайта, над которым я работал, на котором была панель навигации (теперь панель инструментов) с кнопками, которые при нажатии будут прокручиваться к разделам на странице.

Теперь, чтобы панель инструментов сжималась и снова появлялась при прокрутке вверх, я пришлось поместить содержимое страницы в компонент md-content сразу после панели инструментов, но это нарушило все функциональные возможности якорных ссылок...

Кажется, я не могу найти решение для этого, они работают только тогда, когда прокручиваемый элемент является телом, но при этом я теряю эффект сжатия, эффект ряби и даже получаю странный внешний вид...

Соответствующий код:

CSS:

body{
  overflow-y: hidden;
}
#main-content{
  height: 100vh;
}

HTML:

<md-toolbar md-scroll-shrink>
  (...)
  <md-button href="#leave-email">Click</md-button>
</md-toolbar>
<md-content id="main-content">
  (...)
  <md-button href="#leave-email">Click</md-button>
  (lot of stuff)
  <section id="leave-email">(...)</section>
</md-content>

Ни одна из вышеперечисленных кнопок не работает, ранее я использовал Angular smooth scroll для плавной прокрутки, но я удалил его, пытаясь решить эту проблему.

html css angular-material anchor
20.04.2015

Ответы:


1

Это может не сработать для большинства элементов; это связано с тем, что не все элементы имеют атрибут HREF. Обойти это можно с помощью метода onClick, как показано ниже (кнопка также не имеет атрибута HREF):

<button onClick="location.href = 'http://google.co.uk/';"></button>

Однако при использовании этого ваш курсор останется курсором по умолчанию, поэтому, чтобы сделать его более похожим на HREF тега A, вы можете добавить: onMouseOver="this.style.cursor = 'pointer';" и onMouseOut="this.style.cursor = 'default';"

Проверьте этот пример ниже:

<button onMouseOver="this.style.cursor = 'pointer';" onMouseOut="this.style.cursor = 'default';" onclick="location.href = 'http://google.co.uk/';">Click Here</button>

Надеюсь это поможет!

29.03.2016
Новые материалы
Освоение информационного поиска: создание интеллектуальных поисковых систем (глава 1)
Глава 1. Поиск по ключевым словам: основы информационного поиска Справочная глава: «Оценка моделей поиска информации: подробное руководство по показателям производительности » Глава 1: «Поиск..
Фишинг — Упаковано и зашифровано
Будучи старшим ИТ-специалистом в небольшой фирме, я могу делать много разных вещей. Одна из этих вещей: специалист по кибербезопасности. Мне нравится это делать, потому что в настоящее время я..
ВЫ РЕГРЕСС ЭТО?
Чтобы понять, когда использовать регрессионный анализ, мы должны сначала понять, что именно он делает. Вот простой ответ, который появляется, когда вы используете Google: Регрессионный..
Не зря же это называют интеллектом
Стек — C#, Oracle Опыт — 4 года Работа — Разведывательный корпус Мне пора служить Может быть, я немного приукрашиваю себя, но там, где я живу, есть обязательная военная служба на 3..
LeetCode Проблема 41. Первый пропущенный положительный результат
LeetCode Проблема 41. Первый пропущенный положительный результат Учитывая несортированный массив целых чисел, найдите наименьшее пропущенное положительное целое число. Пример 1: Input:..
Расистский и сексистский робот, обученный в Интернете
Его ИИ основан на предвзятых данных, которые создают предрассудки. Он словно переходит из одного эпизода в другой из серии Черное зеркало , а вместо этого представляет собой хронику..
Управление состоянием в микрофронтендах
Стратегии бесперебойного сотрудничества Микро-фронтенды — это быстро растущая тенденция в сфере фронтенда, гарантирующая, что удовольствие не ограничивается исключительно бэкэнд-системами..