{"type":"doc","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Чтобы перейти к элементу по "},{"type":"text","marks":[{"type":"bold"}],"text":"ID"},{"type":"text","text":" через ссылку в HTML, нужно:"}]},{"type":"orderedList","attrs":{"start":1,"type":null},"content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Присвоить элементу уникальный "},{"type":"text","marks":[{"type":"bold"}],"text":"идентификатор ("},{"type":"text","marks":[{"type":"code"}],"text":"id"},{"type":"text","marks":[{"type":"bold"}],"text":")"},{"type":"text","text":"."}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"В ссылке "},{"type":"text","marks":[{"type":"code"}],"text":""},{"type":"text","text":" указать этот идентификатор после символа "},{"type":"text","marks":[{"type":"code"}],"text":"#"},{"type":"text","text":" в атрибуте "},{"type":"text","marks":[{"type":"code"}],"text":"href"},{"type":"text","text":"."}]}]}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"🔹 Пример:"}]},{"type":"codeBlock","attrs":{"language":"html"},"content":[{"type":"text","text":"Перейти к разделу 1\n\n

Раздел 1

Это текст нужного раздела...

\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"👉 При клике на ссылку браузер "},{"type":"text","marks":[{"type":"bold"}],"text":"прокрутит страницу"},{"type":"text","text":" до элемента с "},{"type":"text","marks":[{"type":"code"}],"text":"id=\"section1\""},{"type":"text","text":"."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"🔹 Переход на якорь на другой странице:"}]},{"type":"codeBlock","attrs":{"language":"html"},"content":[{"type":"text","text":"Наша команда\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"На странице "},{"type":"text","marks":[{"type":"code"}],"text":"about.html"},{"type":"text","text":" должен быть элемент:"}]},{"type":"codeBlock","attrs":{"language":"html"},"content":[{"type":"text","text":"

Команда

\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"После клика произойдёт переход на страницу "},{"type":"text","marks":[{"type":"code"}],"text":"about.html"},{"type":"text","text":" и прокрутка до блока "},{"type":"text","marks":[{"type":"code"}],"text":"#team"},{"type":"text","text":"."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"🔹 Можно сделать плавную прокрутку:"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Чтобы переход выглядел плавно, добавь CSS:"}]},{"type":"codeBlock","attrs":{"language":"css"},"content":[{"type":"text","text":"html {\n scroll-behavior: smooth;\n}\n"}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"🔸 Вывод:"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Чтобы перейти к элементу по ID, нужно:"}]},{"type":"orderedList","attrs":{"start":1,"type":null},"content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Присвоить элементу "},{"type":"text","marks":[{"type":"code"}],"text":"id"},{"type":"text","text":", например "},{"type":"text","marks":[{"type":"code"}],"text":"id=\"contact\""},{"type":"text","text":"."}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Сделать ссылку "},{"type":"text","marks":[{"type":"code"}],"text":"К контактам"},{"type":"text","text":"."},{"type":"hardBreak"},{"type":"text","text":"При нажатии браузер автоматически прокрутит страницу к элементу с этим ID."}]}]}]},{"type":"paragraph","attrs":{"textAlign":null}}]}

Как перейти к элементу по ID через ссылку в HTML?

Комментарии