27.05.2019, 19:25
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
|
Сообщение от SL1de
|
|
чтобы экран переводило на то место которое мне нужно?
|
|
Сообщение от SL1de
|
|
экран пользователя перемещался на якорь
|
|
Сообщение от рони
|
|
var hash = window.location.hash;
|
 код не надо править, возможно под словом якорь, у вас что что-то иное чем hash. делайте макет или уточните, что такое якорь.
Последний раз редактировалось рони, 27.05.2019 в 19:31.
|
|
27.05.2019, 19:31
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
SL1de,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style>
.content__text {
font-size: 18px;
line-height: 26px;
font-family: Kazimir,'Helvetica CY',Arial,sans-serif;
position: relative;
color: #333;
}
.content__text-wrap {
margin-bottom: 20px;
max-height: 400px;
overflow: hidden;
}
.open .content__text-wrap {
max-height: none;
}
.open.content__text.shadow:after {
opacity: 0;
transition: 0s;
}
.content__text.shadow:after {
transition: .8s;
display: block;
position: absolute;
left: 0;
right: 0;
top: 0;
height: 400px;
content: ' ';
pointer-events: none;
background: -moz-linear-gradient(top,rgba(255,255,255,0) 0,rgba(255,255,255,0) 1%,rgba(255,255,255,0) 70%,#fff 100%);
background: -webkit-linear-gradient(top,rgba(255,255,255,0) 0,rgba(255,255,255,0) 1%,rgba(255,255,255,0) 70%,#fff 100%);
background: linear-gradient(to bottom,rgba(255,255,255,0) 0,rgba(255,255,255,0) 1%,rgba(255,255,255,0) 70%,#fff 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ffffff', GradientType=0);
}
.product__button {
max-width: 176px;
margin: 0 auto 31px;
padding: 10px;
border: 1px solid #999;
border-radius: 3px;
font-family: GraphikCy-Medium,'Helvetica CY',Arial,sans-serif;
font-size: 14px;
line-height: 14px;
text-align: center;
cursor: pointer;
display: block;
}
.product__button:after {
content: 'Развернуть';
}
.open .product__button:after {
content: 'Свернуть';
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
$('.content__text').on('click', '.toggle' ,function() {
var open = $(this).parents('.content__text').toggleClass('open').is(".open");
//var hash = window.location.hash;
var hash = "#test";
var el = $(hash);
if(!open && el.length) {
$('body,html').stop().animate({
scrollTop: el.offset().top
}, 1200)
}
})
});
</script>
</head>
<body>
<p id="test" style="height: 1000px">это условый якорь</p>
<div class="firstbl content__text shadow">
<div class="content content__text-wrap ">
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus accusamus hic quae libero rem odit et fugit cumque dolore perferendis tempore officia illum atque nam, quia ut, quibusdam. Modi, ex.</div>
<div>Doloribus magnam, labore vero voluptatum quaerat quidem eveniet quo eos, minus aliquid commodi obcaecati animi, facilis voluptatibus voluptas ab, quasi veniam totam soluta molestias natus. Repellat animi perspiciatis, quos vitae.</div>
<div>Cumque ea laudantium corporis odio reprehenderit voluptates, quis iste aperiam eius pariatur itaque magni, autem consequuntur, odit officiis? Adipisci aliquid consequuntur tenetur quae magni eaque repellendus fuga quia nisi laboriosam!</div>
<div>Eligendi ut recusandae officiis nostrum praesentium modi error, quae ab velit itaque, beatae reprehenderit delectus unde id facere aliquam totam est facilis culpa expedita aspernatur! Et amet omnis porro exercitationem.</div>
<div>Fugit quisquam asperiores impedit ipsa, doloribus officiis maiores? Dolore possimus tenetur eum. Corrupti repudiandae doloribus officiis accusamus soluta fugiat consequatur hic, distinctio perferendis. Ipsum incidunt, magni veniam recusandae illum cupiditate.</div>
<div>Iste autem sit quos provident fugiat doloribus, delectus adipisci inventore quam quis hic maxime. Deleniti optio quas hic reprehenderit voluptas eius fuga rerum, veritatis totam molestias officiis, deserunt quis aliquam.</div>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus iusto soluta quibusdam, pariatur molestiae est. Provident impedit unde alias dolores rerum ex minus quae ab, et nihil similique fugit optio.</div>
<div>Hic odit, adipisci. Nam quia dolor architecto debitis. Possimus dolor impedit excepturi quidem. Aperiam neque aut voluptatibus sit earum sint, libero consectetur repellendus doloremque architecto qui, suscipit autem est magnam.</div>
</div>
<div class="toggle product__button"></div>
</div>
</body>
</html>
|
|
27.05.2019, 19:40
|
|
Новичок на форуме
|
|
Регистрация: 18.05.2019
Сообщений: 8
|
|
|
рони,
Это то, что нужно!
Моя благодарность не имеет границ)
Выручил второй раз уже! Всего тебе самого наилучшего. Спасибо!
|
|
28.05.2019, 06:29
|
 |
Профессор
|
|
Регистрация: 20.12.2009
Сообщений: 1,714
|
|
|
Сообщение от SL1de
|
|
Моя благодарность не имеет границ)
|
рони, человек-то не разбирается в JavaScript, а вы клац-клац и в production. А потом люди говорят, дескать, какой тормоз, эти web-технологии... а оказывается рони забыл отменить прокрутки, когда пользователь вдруг захотел прокрутить в другую сторону... Либо пускай сразу переходит к якорю (самое простое решение, и не надо тонны legacy кода), либо уж тогда пишите реализацию, которая адекватно реагирует на ввод пользователя... (а не так, как я где-то видел: нажал, чтобы переместиться вверх, оно поплыло вверх, затем что-то интересное увидел, хотел обратно вниз прокрутить, так оно упорно вверх пыталось улететь, пока, однако, не доплыло до своего места назначения вверху! Я уже вам писал о том, почему не стоит блокировать ввод пользователя при помощи scrollTop. А на сенсорном экране это выглядит как будто перестало реагировать на жесты или залагало. Это ресурс, где люди воспринимают ваш код как должное, что именно так оно максимум может работать, почему бы не предоставить решение без проблем?)
|
|
28.05.2019, 09:19
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
|
Сообщение от Malleys
|
|
почему бы не предоставить решение без проблем?)
|
напишите пожалуйста решение, мне сложно понять, почему scrollTop плохо, но других решений для плавного перемещения я не знаю.
ваш вариант тут я не понял, поэтому не знаю как его использовать.
ещё пара "тупых" вопросов:
|
Сообщение от Malleys
|
|
оказывается рони забыл отменить прокрутки
|
зачем отменять скролл, это не ссылка, и как отменить прокрутку, если не используется обработка события "scroll"?я ценю ваши советы, но мой уровень подготовки иногда не позволяет, даже понять, что вы хотите донести кодом или обьяснениями. |
|
28.05.2019, 12:44
|
|
Профессор
|
|
Регистрация: 20.12.2009
Сообщений: 1,714
|
|
|
Сообщение от рони
|
|
мне сложно понять, почему scrollTop плохо
|
Оно не плохо, вам нужно более осторожно его использовать. Вот, в вашем примере, когда нажмешь кнопку, чтобы свернуть, начинается анимация в виде прокрутки вверх. Она длится 1.2 секунды. Если до того, как закончилась эта анимация, пользователь начнёт любым способом прокрутку, то начнётся дёрганье, поскольку скрипт крутит в одном направлении, вы в другом. Получается, что если во время такой анимации пользователь начнёт прокрутку, анимацию надо прекратить! Вот добавил в ваш пример...
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style>
.content__text {
font-size: 18px;
line-height: 26px;
font-family: Kazimir, 'Helvetica CY', Arial, sans-serif;
position: relative;
color: #333;
}
.content__text-wrap {
margin-bottom: 20px;
max-height: 400px;
overflow: hidden;
}
.open .content__text-wrap {
max-height: none;
}
.open.content__text.shadow:after {
opacity: 0;
transition: 0s;
}
.content__text.shadow:after {
transition: .8s;
display: block;
position: absolute;
left: 0;
right: 0;
top: 0;
height: 400px;
content: ' ';
pointer-events: none;
background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0) 1%, rgba(255, 255, 255, 0) 70%, #fff 100%);
background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0) 1%, rgba(255, 255, 255, 0) 70%, #fff 100%);
background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0) 1%, rgba(255, 255, 255, 0) 70%, #fff 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ffffff', GradientType=0);
}
.product__button {
max-width: 176px;
margin: 0 auto 31px;
padding: 10px;
border: 1px solid #999;
border-radius: 3px;
font-family: GraphikCy-Medium, 'Helvetica CY', Arial, sans-serif;
font-size: 14px;
background: white;
line-height: 14px;
text-align: center;
cursor: pointer;
display: block;
}
.product__button:after {
content: 'Развернуть';
}
.open .product__button:after {
content: 'Свернуть';
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
var page = $('body,html');
var types = "scroll mousedown wheel DOMMouseScroll mousewheel keyup touchmove";
function pageHandler() { page.stop(); }
$('.content__text').on('click', '.toggle', function() {
var open = $(this).parents('.content__text').toggleClass('open').is(".open");
var target = $("#test" /* window.location.hash */);
if (!open && target.length) {
page.on(types, pageHandler).animate({
scrollTop: target.offset().top
}, 1200, function() {
page.off(types, pageHandler);
});
}
})
});
</script>
</head>
<body>
<p id="test" style="height: 1000px">это условый якорь</p>
<div class="firstbl content__text shadow">
<div class="content content__text-wrap ">
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus accusamus hic quae libero rem odit et fugit cumque dolore perferendis tempore officia illum atque nam, quia ut, quibusdam. Modi, ex.</div>
<div>Doloribus magnam, labore vero voluptatum quaerat quidem eveniet quo eos, minus aliquid commodi obcaecati animi, facilis voluptatibus voluptas ab, quasi veniam totam soluta molestias natus. Repellat animi perspiciatis, quos vitae.</div>
<div>Cumque ea laudantium corporis odio reprehenderit voluptates, quis iste aperiam eius pariatur itaque magni, autem consequuntur, odit officiis? Adipisci aliquid consequuntur tenetur quae magni eaque repellendus fuga quia nisi laboriosam!</div>
<div>Eligendi ut recusandae officiis nostrum praesentium modi error, quae ab velit itaque, beatae reprehenderit delectus unde id facere aliquam totam est facilis culpa expedita aspernatur! Et amet omnis porro exercitationem.</div>
<div>Fugit quisquam asperiores impedit ipsa, doloribus officiis maiores? Dolore possimus tenetur eum. Corrupti repudiandae doloribus officiis accusamus soluta fugiat consequatur hic, distinctio perferendis. Ipsum incidunt, magni veniam recusandae illum
cupiditate.</div>
<div>Iste autem sit quos provident fugiat doloribus, delectus adipisci inventore quam quis hic maxime. Deleniti optio quas hic reprehenderit voluptas eius fuga rerum, veritatis totam molestias officiis, deserunt quis aliquam.</div>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus iusto soluta quibusdam, pariatur molestiae est. Provident impedit unde alias dolores rerum ex minus quae ab, et nihil similique fugit optio.</div>
<div>Hic odit, adipisci. Nam quia dolor architecto debitis. Possimus dolor impedit excepturi quidem. Aperiam neque aut voluptatibus sit earum sint, libero consectetur repellendus doloremque architecto qui, suscipit autem est magnam.</div>
</div>
<button class="toggle product__button"></button>
</div>
</body>
</html>
|
Сообщение от рони
|
|
мой уровень подготовки иногда не позволяет, даже понять
|
Я думаю, у вас хороший уровень, просто вы почему-то думаете, что если прокрутка, то это только колёсико мыши (почему я вам добавил столько событии?), если нажатие, то непременно только мышкой (почему я вам заменил на <button>), и т. д. В HTML в плане доступности продумано, и с этим не надо бороться (например, давайте всё сбросим, отменим и заново изобретём)
Последний раз редактировалось Malleys, 28.05.2019 в 13:03.
|
|
28.05.2019, 13:06
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
|
Сообщение от Malleys
|
|
если во время такой анимации пользователь начнёт прокрутку, анимацию надо прекратить!
|
понятно.
|
Сообщение от Malleys
|
|
заменил на <button>
|
согласен.
спасибо. |
|
|
|
