Есть ли метод в html, который заставляет веб-страницу прокручивать определенный элемент с помощью HTML!?
Прокрутите список до определенного элемента Используя html
Ответ 1
Да, вы используете этот
<a href="#google"></a>
<div id="google"></div>
Но это не создает плавный прокрутки, чтобы вы знали.
Ответ 2
Вы должны указать, хотите ли вы, чтобы он плавно прокручивал или просто переходил к элементу.
Прыгать легко и может быть сделано только с помощью HTML или Javascript. Самое простое - использовать привязку. Ограничение состоит в том, что каждый элемент, который вы хотите прокрутить, должен иметь id
. Побочным эффектом является то, что #theID
будет добавлено к URL
<a href="#scroll">Go to Title</a>
<div>
<h1 id="scroll">Title</h1>
</div>
Вы можете добавлять эффекты CSS к цели при нажатии ссылки с помощью селектора CSS :target
.
С некоторыми базовыми JS вы можете сделать больше, а именно метод scrollIntoView()
. Элементам не нужен идентификатор, хотя он еще проще, например
function onLinkClick() {
document.getElementsByTagName('h2')[3].scrollIntoView();
// will scroll to 4th h3 element
}
Наконец, если вам нужна плавная прокрутка, вы должны взглянуть на JS Smooth Scroll или этот фрагмент для jQuery. (NB: возможно, есть много других).
Ответ 3
<!-- HTML -->
<a href="#google"></a>
<div id="google"></div>
/*CSS*/
html { scroll-behavior: smooth; }
Кроме того, вы можете добавить html {scroll-поведения: smooth; } to your CSS to create a smooth scroll. } к вашему CSS, чтобы создать плавную прокрутку.
Ответ 4
Добавьте это в свой javascript:
$('.smooth-goto').on('click', function() {
$('html, body').animate({scrollTop: $(this.hash).offset().top - 50}, 1000);
return false;
});
Кроме того, не забудьте также добавить этот класс в свой тег:
<a href="#id-of-element" class="smooth-goto">Text</a>
Ответ 5
Да, вы можете использовать якорь , указав атрибут id
элемента и связав его с хешем.
Например (взято из спецификации W3):
You may read more about this in <A href="#section2">Section Two</A>.
...later in the document
<H2 id="section2">Section Two</H2>
...later in the document
<P>Please refer to <A href="#section2">Section Two</A> above
for more details.
Ответ 6
Используя атрибут href внутри тега привязки, вы можете прокручивать страницу до определенного элемента с помощью #
перед именем идентификатора элементов.
Кроме того, вот несколько jQuery/JS, которые будут выполнять перенос переменных в div.
<html>
<body>
Click <a href="#myContent">here</a> to scroll to the myContent section.
<div id="myContent">
...
</div>
<script>
var myClassName = "foo";
$(function() {
$("#myContent").addClass(myClassName);
});
</script>
</body>
Ответ 7
<nav>
<a href="#section1">1</a>
<a href="#section2">2</a>
<a href="#section3">3</a>
</nav>
<section id="section1">1</section>
<section id="section2" class="fifty">2</section>
<section id="section3">3</section>
<style>
* {padding: 0; margin: 0;}
nav {
background: black;
position: fixed;
}
a {
color: #fff;
display: inline-block;
padding: 0 1em;
height: 50px;
}
section {
background: red;
height: 100vh;
text-align: center;
font-size: 5em;
}
#section1{
background-color:green;
}
#section3{
background-color:yellow;
}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" >
$(document).on('click', 'a[href^="#"]', function (event) {
event.preventDefault();
$('html, body').animate({
scrollTop: $($.attr(this, 'href')).offset().top
}, 500);
});
</script>