Html — Ссылка якорь на разворачивающуюся форму


Содержание

Комментарии и якоря

Комментарии в HTML коде используются для временного отключения кода (как правило, просто удалить код неудобно по той причине, что возможно его придется восстанавливать) и в качестве подсказки для себя, либо для лиц, которые будут разбираться в Вашем коде. Текст внутри комментария не отображается браузером на странице.

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

Ниже представлен пример использования тега комментария внутри HTML страницы:

Условные комментарии

Условные комментарии, используются для написания специального кода, предназначенного для конкретного браузера (Internet Explorer). Остальные браузеры этот код игнорируют как обычный комментарий.

Код выполняется только тогда, когда совпадает заданное условие. В данном случае если браузер Internet Explorer 7, то необходимо выполнить код, который мы поместим внутри тега.

Оператор Значение
lt Меньше чем.
lte Меньше или равно.
gt Больше чем.
gte Больше или равно.
& Логическое И. Предназначено для объединения нескольких условий. Возвращает true (истину), если все условия выполняются.
! Логическое НЕ. Условие истинно, если условие следующее за ! не выполняется.
| Логическое ИЛИ. Возвращает true (истину), если хотя бы одно из условий выполняется.
( ) Группировка дополнительных условий (создание сложных запросов с логическими операторами).

HTML5 Shiv

Хочу обратить Ваше внимание на то, что в Internet Explorer 8 и более ранних версиях поддержка элементов HTML 5 отсутствует. Несмотря на то, что доля Internet Explorer этих версий смело приближается к 0.1% к концу 2020 года, некоторые заказчики требуют проводить разработку с учётом поддержки данных браузеров.

Для того, чтобы ранние версии Internet Explorer распознавали теги HTML 5, был написан плагин HTML5 Shiv (скрипт на языке программирования Javascript). Чтобы обеспечить поддержку этих браузеров, разместите перед закрывающим тегом на каждой странице Вашего сайта следующий код * :

В этом примере мы создали условный комментарий, который предназначен для браузеров Internet Explorer, чья версия меньше чем девятая ( if lt IE 9 ). Внутри комментария мы разместили скрипт, который подключается со стороннего ресурса (абсолютная ссылка).

* — В рамках изучения HTML и CSS, мы не будем рассматривать методы подключения скриптов к HTML документам. Пример носит образовательный характер с целью расширения вашего кругозора и понимания из чего состоит практически любая страница в сети.

HTML создание закладки (якоря)

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

Давайте по порядку рассмотрим, что требуется для того, чтобы создать якорь:

    Для начала нам необходимо определиться куда мы хотим, чтобы наш пользователь перешёл, допустим это заголовочный элемент первого уровня (


Обратите внимание на некоторые правила использования глобального атрибута id:

  • Используйте только буквы алфавита (A-Z, a-z), числа, дефисы, знаки подчеркивания.
  • Идентификатор не должен содержать каких-либо пробелов.
  • Идентификатор на странице используется только к одному элементу.
  • Идентификаторы чувствительны к регистру (vottakvot и VotTakVot разные идентификаторы).

Глобальный атрибут id будет более подробно рассмотрен при изучении CSS 3 в статье «Селекторы. Часть 1.».

  1. И нам осталось только добавить в адрес ссылки наименование нашего идентификатора, перед идентификатором обязательно необходимо указать символ решетки #:

В результате чего при клике на ссылку посетитель автоматически перейдёт к той части страницы, которую мы задали, в браузере это будет выглядеть следующим образом:

Но и это еще не всё, ссылку с якорем можно сделать как на другую страницу Вашего сайта, так и совершенно стороннего сайта (абсолютный адрес), при условии, что у элемента задан идентификатор (id). Пример перехода к заголовку первого уровня предыдущей статьи:

В результате чего при клике на ссылку посетитель автоматически перейдёт к началу предыдущей статьи:

Вопросы и задачи по теме

Перед тем как перейти к изучению следующей темы пройдите практическое задание:

Как сделать якорную ссылку

Якорная ссылка может стать отличной навигацией контента за счет перемещения с одной части статьи к другой. И это на самом деле очень удобно, а иногда даже практично. Давайте рассмотрим, как в целом делается якорная ссылка.

Якорная ссылка с плавной прокруткой

Начнем с конструкции и добавления якорной ссылки на веб-страницу. Якорь состоит из двух неразрывных частей. Первая, это ссылка, которая в атрибуте href содержит уникальный адрес документа начинающий с символа решетки ( # ), и непосредственно является названием якоря.

Вторая часть, это уже сам якорь, задан с помощью атрибута name . Он будет тем местом, где останавливается страница при нажатии на ссылку с уникальным именованием.

Есть другой вариант якорной ссылки, но не сильно отличающийся от первого. Разница вся в том, что вместо атрибута name пишется уникальный идентификатор ссылки, а первая часть остается неизменной.

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


Сам скрипт небольшой ( источник скрипта ), подключается к сайту обычным способом (header, footer, отдельный файл). Вот он собственной персоной:

Напомню, что для работы скрипта необходима подключение библиотеки jQuery.

Добавляем якорную ссылку на другую страницу сайта

Когда происходит клик по якорной ссылке, то можно заметить, как в адресной строке после окончания .html добавляется идентификатор якоря. По сути, это точный адрес якоря. Таким образом, возможно указать перемещение не только по одной веб-странице, а даже перемещаться на другой сайт к определенному разделу. Для этого нужно задать в атрибуте href адрес с окончанием якоря.

Цукерберг рекомендует:  Создание сайтов и их продвижение - Ищу разработчика сайта под ключ

Плавный переход от блока к блоку (скроллинг)

Вот еще один момент, касающийся переходов от одного веб-элемента к другому. Если якорная ссылка не решает задачу, можно просто использовать скроллинг. Он выполнит плавный переход от любого класса или идентификатора к другому и это необязательна должна быть ссылка.

Для работы скрипта также нужна библиотека jQuery.

Ссылка с якорем

Это задание архивной главы. Перейдите по ссылке, чтобы пройти задание в актуальной главе.

Ссылки с якорем обычно используются для создания навигации внутри страницы. Например, оглавления в начале страницы с большой статьёй.

Ссылка с якорем содержит символ # , после которого идёт идентификатор. Идентификатор создаётся с помощью атрибута id , который может быть задан у любого тега.

Можно задать адрес, состоящий из одного якоря, например:

При переходе по такой ссылке браузер найдёт на странице элемент с атрибутом id со значением glava1 и прокрутит окно страницы к нему. То есть перезагрузки страницы не произойдёт.

Якорь можно использовать и в абсолютных адресах, тогда после перехода на нужную страницу произойдёт прокрутка к заданной части этой страницы.

  • index.html Сплит-режим
  • style.css Сплит-режим


Оглавление

История

URL был изобретён Тимом Бернерсом-Ли в 1990 году в стенах Европейского совета по ядерным исследованиям в Женеве, Швейцария. URL стал фундаментальной инновацией в Интернете.

Изначально URL предназначался для обозначения мест расположения ресурсов (чаще всего файлов) во Всемирной паутине. Сейчас URL применяется для обозначения адресов почти всех ресурсов Интернета. Стандарт URL закреплён в документе RFC 1738, прежняя версия была определена в RFC 1630.

Сейчас URL позиционируется как часть более общей системы идентификации ресурсов URI, сам термин URL постепенно уступает место более широкому термину URI. Стандарт URL регулируется организацией IETF и её подразделениями.

Структура URL

Изначально локатор URL был разработан как система для максимально естественного указания на местонахождения ресурсов в сети. Локатор должен был быть легко расширяемым и использовать лишь ограниченный набор ASCII‐символов (к примеру, пробел никогда не применяется в URL). В связи с этим, возникла следующая традиционная форма записи URL:

Кодирование URL

Появление адресов URL стало существенным нововведением в Интернете. Однако с момента его изобретения и по сей день стандарт URL обладает серьёзным недостатком — в нём можно использовать только ограниченный набор символов, даже меньший, нежели в ASCII: латинские буквы, цифры и лишь некоторые знаки препинания. Если мы захотим использовать в URL символы кириллицы, или иероглифы, или, скажем, специфические символы французского языка, то нужные нам символы должны быть перекодированы особым образом.

HTML. Ссылки якоря.

Следующее понятие, с которым мы познакомимся в HTML — это ссылки якоря. Давайте будем разбираться, что это такое и зачем это нужно.

Предположим, что у нас есть большая страница с боковой полосой прокрутки (см. видео). На этой странице находится большое количество контента.

С этим часто можно встретить на одностраничных сайтах (лэндингах).

Не всегда удобно перемещаться по такому документу с помощью полосы прокрутки. Хорошо было бы дать пользователю возможность кликнув по специальному элементу в меню, по специальной ссылке сразу дать пользователю возможность переместиться в нужное место документа.

Как можно реализовать такой эффект работая только с HTML?

Помочь нам в этом могут так называемые ссылки якоря. Ссылка якорь — это ссылка, переходя по которой, мы можем переместить окно браузера в пределах одной страницы, не переходя на другой url адрес.

Давайте поучимся их создавать.


Перед созданием ссылок якорей, нужно произвести разметку документа.

Для того, чтобы это сделать, нам нужно добавить к тем элементам, для которых мы хотим, чтобы нас перемещало в пределах одной страницы некую HTML-разметку.

Для этого нам нужно добавить к каждому из таких разделов атрибут id. Т.е. уникальный идентификатор.

Добавим этот атрибут каждому подзаголовку, куда мы хотели бы перемещаться:

Присвоив такое значение мы говорим, что у этого элемента есть уникальный ключ — значение, по которому к нему можно обращаться.

Аналогично делаем для остальных элементов h2 на странице.

В пределах одной страницы значение id должно быть уникальным для каждого подзаголовка.

Т.е. мы с вами разметили те элементы, куда мы хотели бы сделать ссылки якоря.

Для того, чтобы создать ссылку на элемент, куда мы хотим переместить окно браузера, нам нужно просто указать его значение атрибута id.

Сначала указывается символ решетки — это означает, что мы ссылаемся на какой-то элемент в пределах текущей страницы, у которого атрибут id принимает нужное значение.

Вот таким образом создается ссылка якорь на HTML-странице. Посмотрите видео, чтобы увидеть, как это будет работать.

Чтобы оставить сообщение, зарегистрируйтесь/войдите на сайт через:

Или зарегистрируйтесь через социальные сети:

HTML ссылка – или как «бросить якорь» в нужном месте…

Второй формат – перенаправление в определенную точку страницы. Такая ссылка называется – якорной.

То есть, мы отправляем посетителя, прошедшего по этому линку, к «якорю», который установлен либо на этой же странице либо на другой, нашего блога.

Необходимость создания якорной ссылки

1. Конкретная отправка читателя к нужной точке статьи, которая имеет большие размеры.


Представьте, что Вы публикуете большой, информативный пост, с несколькими подпунктами, разбирающий какие-то последовательные моменты. Ваш читатель к концу публикации, хотел что-либо повторить или уточнить. (Здесь очень важно Вам, как автору, почувствовать возможные проблемы читательской аудитории). Созданная якорная перелинковка к конкретной точке статьи, очень будет полезна.

Либо Вы рассказываете о серии продуктов. Перечисляете их и даете описание. Некоторые продукты лучше работают в комбинации друг с другом. На такой публикации якорная перелинковка просто необходима, так как вы сможете сразу заинтересованного посетителя отправить к информации о нужном продукте.

2. Отправка читателя к определенному месту на другой странице.

Здесь совсем просто. Вам, например, необходимо отправить посетителя к конкретному месту прайс листа, который опубликован на другой странице. Нет ничего проще. Вы применяете ссылку – идентификатор или, как ее еще называют – якорную.
Разобрались . Теперь давайте приступим к практике.

Создание ссылки «вручную»

Случай 1. Перенаправление в рамках одного поста.

1.1 Заходим в редакцию поста и находим нужную точку, то место куда должен попасть читатель.

1.2 Устанавливаем «якорь». Его можно обозначить просто цифрой или буквами латиницы. Но вы должны понимать, что на блоге не могут быть два одинаковых идентификатора. Выглядеть это будет так:

Плавный переход к якорю-ссылке

Здравствуйте, друзья. Хочу затронуть такую тему, как плавный переход к якорю-ссылке на странице сайта. Если вы пишете на своем сайте объемные тексты, грамотно его форматируете, оформляете списками, скриншотами и другими элементами, то плавный скроллинг к якорю придаст оформлению еще большую привлекательность. Но давайте для начала узнаем, что это такое и как оно будет работать. Пример работы вы можете наблюдать на этой странице, нажав на пункты этого списка.

Цукерберг рекомендует:  Обучение - SSH Передача команды в AndroidStudio. Как прочитать ответ

Что такое якорь-ссылка

Якорь-ссылка (он же anchor), это специальная метка, которая заранее создается на странице в любом месте для быстрого перехода к конкретному месту. Обычно якоря используют при написании больших текстов различных мануалов, справок инструкций, правил. Расставляют их в каждый пункт и вначале страницы делают ссылки на них. делается это для удобства пользователя, который может в один клик перейти к интересующему его пункту, а не скроллить страницу вручную.

Как сделать ссылку-якорь HTML

Ссылки-якоря делаются на языке гипертекстовой разметки HTML. Создание якоря в HTML — дело совсем не хитрое. Требуется всего лишь небольшие знания в этом языке и понимание принципов его работы. если с этим у вас проблем не возникает, то вы сможете сделать это без особого труда. Итак, чтобы сделать якорь на странице HTML, нужно прописывать в коде примерно следующее.

Метка на странице для перехода на нее

И для того, чтобы перейти к этому месту на странице, где указана данная метка, нужно в ссылке прописать вот это:

При таком подходе переход будет осуществляться мгновенным скачком с одного места на другое

Плавный скроллинг к якорю


С развитием веб-технологий стало возможно делать более красивые, динамичные сайты с различными эффектами, анимацией и плавными переходами. И это на самом деле здорово, когда можно чем-то заинтересовать посетителя, помимо контента и оставить хорошие впечатления от посещения сайта. В определенной степени это играет на руку владельцу сайта. Для плавного перехода к якорю, будем использовать библиотеку jQuery и подключим совсем небольшой скрипт.

Подключить этот скрипт можно тремя способами. Первый, это вставить на страницу между тегами head. Второй — вынести в отдельный файл и подключить отдельно примерно таким образом:

Третий способ — добавление кода в уже существующий js файл. Это может быть сам файл библиотеки jQuery. Кстати, как подключить библиотеку, читайте здесь. Если для подключение скрипта вы будете использовать второй или третий способ, то удалите из кода 1 и 14 строчки.

Нюансы

Теперь о нюансах использования. Во-первых якорям нужно задавать идентификаторы (вместо name прописать id). выглядеть это будет так:

Метка на странице для перехода на нее

Во-вторых, если хотите, чтобы плавный скроллинг осуществлялся не ко всем якорям, а только к определенным, нужно изменить третью строчку скрипта вот так:

И добавить класс к ссылке:

Еще один нюанс, о котором хотелось сказать, это то, что в отличии от простого якоря HTML, jQuery якорь не прописывает в адресной строке браузера ссылку на якорь при переходе к нему. Чтобы вы понимали о чем речь, приведу пример того, как может выглядеть ссылка на якорь в адресной строке браузера.

Если вставить такую ссылку в браузер, то автоматически произойдет переход на то место, где стоит указанная метка. Сначала я подумал, что это плохо, но немного поразмыслив, пришел к выводу, что так даже лучше. дело в том, если посетители будут делиться вашей ссылкой, то лучше пусть будет ссылка на полную статью, а не конкретная ее часть. а вы, как администратор и автор, всегда сможете скопировать ссылку к нужному якорю и поделиться ей с кем угодно. В общем, вот так. Все замечания, предложения, благодарности принимаются в письменном виде в комментариях. ��

Как сделать SEO-перелинковку внутри HTML-страницы: якорь ссылка

Многие говорят, что внутренние ссылки играют совсем маленькую роль в SEO. Но при этом все чаще слышно о внутренней перелинковке внутри сайта. Особенно это касается больших сайтов, где надо перераспеределить вес на определенные документы, чтобы отработала правильно кластеризация и ранжировались нужные документы в выдаче Google. Перелинковка работает отлично и с НЧ запросами на самом деле, особенное если не хочется ставить ссылки внешние, а ссылочное надо. Отлично такое срабатывает при низкой конкуренции и запросах из «long tail».

Надо признать что ссылки внутри одного документа тоже работают. А именно речь идет о якорных ссылках. Особенно важно обратить внимание на это при написании лонгридов по модели LSI-текстов. Количество униграм и вообще количество символов обычно намного выше по сравнению с обычными посадочными у товаров или категорий. Часто можно встретить такое на информационных сайтах, где вебмастера ведут попытки спылесосить весь поисковых неконкурентный трафик.

Содержимое статьи:

Как же сделать SEO-перелинковку внутри страниц?

Технически на HTML-страницах это делается легко любым специалистов по SEO, копирайтеров с банальными знаниями HTML или фронтенд-разработчиком. Нам необходимо поставить якорную ссылку с нужным содержимым и отправить внутри страницы его на релевантный контент. Такое же можно проделывать со ссылками, которые ведут и на другие документы.

Якорем мы называем закладку с уникальным именем на определенном месте HTML-страницы, которая предназначена для создания перехода к ней по ссылке. Данные якоря удобно использовать в документах большого объема (лонгриды, например), чтобы можно было быстро переходить к нужному разделу. Также данный метод используется при переходе «вверх», когда вы листаете длинные статьи или лендинги.


Что создать якорь следует вначале делать закладку в соответствующем месте и дать ей имя при помощи атрибута name тега на странице. В качестве значения href для перехода к этому якорю используется имя закладки с символом решетки (#) впереди.Между тегами и текст не обязателен, так как требуется лишь указать местоположение перехода по ссылке, находящейся внизу страницы. Имя ссылки на якорь начинается с символа #, после чего идет имя якоря, оно выбирается любое, соответствующее тематике. Главное, чтобы значения атрибутов name и href совпадали (символ решетки не в счет).

Пример кода HTML со якорными ссылками

Текст с релевантными контентом по ключевым НЧ

Ссылка-якорь. Что такое ссылка-якорь? Как создать ссылку-якорь?

Светлый Темный
  • Статистика 4106 2
  • Автор: admin
  • Раздел: Статьи, Шпаргалка
  • Комментарии: Комментариев нет
  • Теги: анкор, создать ссылку-якорь, якорь

Якоря применяют для того, что бы направить посетителя сайта в определённое место статьи, тем самым избавляя его от перемещения по странице с большим объёмом материала. Если вы хотите изучить HTML и вникнуть в детали, я подробно объясню, как создать якорь в HTML.

Как создать ссылку-якорь в HTML

1. Вначале нужно сделать метку (вставить якорь) в соответствующем месте страницы сайта и дать ей имя. В примере ниже, якорю дано имя link «», но вы можете присвоить якорю своё имя. Обычно это слово обобщает смысл текста, на который вы даёте ссылку и пишется на латинице, может содержать и латинские буквы, и цифры. Количество якорей на странице может быть сколько угодно, но обязательное условие — имя якоря должно быть уникальным и не должно повторяться.

Цукерберг рекомендует:  Трансформации CSS в адаптивном шаблоне

Примечание: В XHTML и HTML5 вместо name для определения якоря нужно указывать атрибут id . Между и текст писать не обязательно, так как задача якоря указать место закладки на странице.

2. К якорю надо создать ссылку, кликнув по которой посетитель попадёт в то место, где находится якорь.

Примечание: Если якорь и ссылка на него находятся на одной странице, адрес страницы в ссылке указывать не нужно.


Вот и все, если Вы хотите «поблагодарить» наше IT сообщество — у вас есть такая возможность: справа есть варианты для пожертвований на развитие портала. Или поделитесь статьей в ваших соц.сетях через сервис ниже.

Что такое ссылка якорь в HTML и как ее сделать?

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

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

Добиться такого эффекта можно с помощью языка разметки гипертекста HTML, не прибегая ни к каким дополнительным скриптам.

Для этого нужно создать так называемую ссылку якорь. Ссылка якорь – это ссылка, которая перенаправляет пользователя не на другую веб-страницу, а на какаю-то часть той веб-страницы, на которой он в данный момент находится.

Технология, по которой это можно сделать, довольно проста:

элементу, к которому необходимо выполнить переход, присваиваем атрибут id с уникальным именем (это имя можно придумать произвольно), а для ссылки, которая будет осуществлять переход, для атрибута href, в самом конце url – адреса добавляем через символ решетки (#) имя того id, к которому нужно выполнить переход.

Кстати, якорь является одной из составляющих структуры url – адреса.

Следующий пример показывает, как это можно сделать на практике.

Если теперь в каждом разделе действительно будет много текста, так что этот текст не будет вмещаться в размеры окна браузера, то, при клике по любой ссылке, будет выполнен переход на нужный раздел, и пользователю не нужно будет прокручивать экран вниз.

И напоследок, чтобы вы были в курсе, при переходе по ссылке якорю, меняет свое действие кнопка «Назад» в браузере. Когда вы нажмете на эту кнопку, вас будет переносить не на ту веб-страницу, которую вы последний раз просматривали, а на то место веб-страницы, которое вы просматривали до того, как перешли по ссылке якорю.

Cсылка якорь на странице. Плавный якорь.

В данной статье пойдет речь о том, что такое html cсылка якорь на странице сайта и вдобавок приведу простейший пример плавной прокрутки до якоря на JQuery.

Cсылка якорь на странице это не что иное как элемент тавигации по контенту страницы. Обычно веб-мастера используют такие ссылки для навигации по разделам. Особенно актуальны такие ссылки, когда на странице много контента, состоящего из нескольких разделов.

Также в меню одностраничников Landing Page используются якоря навигации по разделам. Та же кнопка наверх — не что иное, как ссылка якорь.

Cсылки якоря на странице являются одной из составляющих CEO оптимизации статьи, так как они повышают юзабилити сайта, и поисковые системы обращают на это свое внимание.

Как сделать html ссылку якорь на странице


Cделать html ссылку якорь на странице очень просто. Для этого нужно:
Присвоить в нужном месте страницы, например заголовку раздела страницы идентификатор ID .

— это и есть идентификатор ID, который я присвоил заголовку одного из разделов воображаемой страницы. Название идентификатора может быть любым, но должно использоваться только один раз на странице.

Теперь осталось создать обычную html ссылку и ссылаться она должна на присвоенный разделу идентификатор ID :

При нажатии на такую ссылку осуществиться переход до якоря —

Плавный якорь jQuery

Единственным визуальным недостатком html ссылок якорей является переход к разделам как-бы рывком. Но этот недостаток устраняется подключением небольшого скрипта плавного скролла при прокрутке страницы до якоря.

Библиотека jQuery

Для создания плавных якорей при прокрутке страницы необходимо подключение библиотеки jQuery. На WordPress библиотека jQuery подключена по умолчанию.

Поэтому остается подключить в footer данный скрипт, а остальное все делать как в примере создания обычного якоря.

В данном скрипте можно настроить скорость прокрутки до якоря изменив значение 1000 на другое.

На этом на сегодня все.

Скачать оба примера

Лучший способ отблагодарить автора

Похожие по Тегам статьи

В статье пойдет речь о том как сделать плавающий виджет WordPress без использования плагинов….

Маска для ввода номера телефона дает понять человеку в каком формате вводить номер, а…

В статье я затрону только увеличение скорости загрузки сайта WordPress путем замены стандартной, вшитой…

6 thoughts on “ Cсылка якорь на странице. Плавный якорь. ”

спасибо за скрипт — переходит плавно и красиво)
но у меня свой косяк — верхнее меню фиксируется при прокрутке страницы и получается, что при переходе по якорю к данному блоку, этот блок заходит под меню.
не подскажете — как мне это побороть?

Самое простое, это ставить якорь немного выше нужного раздела. Ну или скриптик дописывать.

а что нужно в скриптик дописать?)

перенесла якоря в пустой div над каждым блоком и в css указала для него , где 70px — высота моего фиксированного меню. прокрутка стала идеальной ��
будет очень любезно с вашей стороны, если подскажете, насколько грамотным можно считать такой код и можно ли его в дальнейшем использовать для подобных случаев. или все-таки лучше через скрипт? я только начинаю все это изучать)
еще раз спасибо!

Вот так попробуйте

В СSS добавьте. ТУТ #ancor — якорь. Но нужно будет через запятую указать все якоря

Положительный padding и отрицательный margin
Используем padding для создания отступа и отрицательный margin, чтобы этот же отступ убрать, а точнее — сделать его незаметным для пользователей.

Обратите внимание, что внутренные отступы padding тоже попадают под заливку, то есть, если у вашего элемента будет фон, то он скорее всего наедет на контент перед ним. Для того, чтобы игнорировать padding при добавлении фона на элемент, используйте CSS-свойство background-clip:content-box.

scrollTop: $(jQuery(this).attr(«href»)).offset().top — ($(‘айди_фиксированное_меню’).height())

Понравилась статья? Поделиться с друзьями:
Все языки программирования для начинающих