我如何组合这些代码？ （多读，少读滚动到顶部）
How do I combined these code? (Read more, Read Less with Scroll To Top)
我的页面 header 上显示了一些段落。我不想显示所有文本，所以我有一个多读和少读按钮。目前，当点击少读按钮时，页面仍然在中间。我希望当单击少读按钮时它也可以滚动回顶部。我找到了这两个代码，并且都分别为我提供了我想要的功能。我想结合代码，但我不确定如何结合，因为我还在学习 JavaScript.
这是编码（提前致谢）：
function myFunction() {
var dots = document.getElementById("dots");
var moreText = document.getElementById("more");
var btnText = document.getElementById("myBtn");
if (dots.style.display === "none") {
dots.style.display = "inline";
btnText.innerHTML = "Read more";
moreText.style.display = "none";
} else {
dots.style.display = "none";
btnText.innerHTML = "Read less";
moreText.style.display = "inline";
}
}
window.smoothScroll = function(target) {
var scrollContainer = target;
do { //find scroll container
scrollContainer = scrollContainer.parentNode;
if (!scrollContainer) return;
scrollContainer.scrollTop += 1;
} while (scrollContainer.scrollTop == 0);
var targetY = 0;
do { //find the top of target relatively to the container
if (target == scrollContainer) break;
targetY += target.offsetTop;
} while (target = target.offsetParent);
scroll = function(c, a, b, i) {
i++; if (i > 30) return;
c.scrollTop = a + (b - a) / 30 * i;
setTimeout(function(){ scroll(c, a, b, i); }, 20);
}
// start scrolling
scroll(scrollContainer, scrollContainer.scrollTop, targetY, 0);
}
#more{
display: none;
}
#myBtn{
border:1px solid #000 /*none*/;
background:none;
font-family:caviardreams;
font-size: 13px;
text-transform: uppercase;
font-weight:bold;
padding:0 10px 0 10px;
margin:-5px 0 0 5px;
letter-spacing:5px;
}.first{
width:100%;
}
.second {
width: 40%;
}
<div class="second" id="second">
<p>sum dolor sit amet, ex pri utamur volumus, usu graece platonem an. Possit labitur assueverit et pro. Eum in erant dictas mnesarchum, sed veritus perfecto menandri et, graece omittam mea cu. Exerci facilisis intellegat has ea, cu sea explicari assentior appellantur, tale offendit pertinax ut vel. Id viris consectetuer sed. Mea ea wisi suscipit voluptaria.</p>
<span id="dots"><button onclick="myFunction()" id="myBtn">Read more</button></span>
<span id="more"><span id="less">
<p>sum dolor sit amet, ex pri utamur volumus, usu graece platonem an. Possit labitur assueverit et pro. Eum in erant dictas mnesarchum, sed veritus perfecto menandri et, graece omittam mea cu. Exerci facilisis intellegat has ea, cu sea explicari assentior appellantur, tale offendit pertinax ut vel. Id viris consectetuer sed. Mea ea wisi suscipit voluptaria.</p>
<p>sum dolor sit amet, ex pri utamur volumus, usu graece platonem an. Possit labitur assueverit et pro. Eum in erant dictas mnesarchum, sed veritus perfecto menandri et, graece omittam mea cu. Exerci facilisis intellegat has ea, cu sea explicari assentior appellantur, tale offendit pertinax ut vel. Id viris consectetuer sed. Mea ea wisi suscipit voluptaria.</p>
<p>sum dolor sit amet, ex pri utamur volumus, usu graece platonem an. Possit labitur assueverit et pro. Eum in erant dictas mnesarchum, sed veritus perfecto menandri et, graece omittam mea cu. Exerci facilisis intellegat has ea, cu sea explicari assentior appellantur, tale offendit pertinax ut vel. Id viris consectetuer sed. Mea ea wisi suscipit voluptaria.</p>
<div class="first"><button type="button" onclick="smoothScroll(document.getElementById('second'))">Click Me!</button></div>
<span id="dots"><button onclick="myFunction()" id="myBtn">Read Less</button></span>
</span></span>
</div>
点击此处按钮执行回滚到顶部的功能：
<div class="first"><button type="button" onclick="smoothScroll(document.getElementById('second'))">Click Me!</button></div>
onclick部分触发JavaScript代码中的smothScroll()函数。
现在Read Less部分在myFunction()的if条件下执行。如果您在 if 条件的底部添加 smoothScroll() 它应该可以正常工作：
if (dots.style.display === "none") {
dots.style.display = "inline";
btnText.innerHTML = "Read more";
moreText.style.display = "none";
smoothScroll(document.getElementById('second')); // <-- here
}
既然您知道如何实现您想要的，我建议您稍微清理一下代码并尝试了解一切是如何工作的。您还可以 google 关于现代 JavaScript 等。这将是提高您的 JavaScript 知识的一个很好的练习。
function myFunction() {
var dots = document.getElementById("dots");
var moreText = document.getElementById("more");
var btnText = document.getElementById("myBtn");
if (dots.style.display === "none") {
dots.style.display = "inline";
btnText.innerHTML = "Read more";
moreText.style.display = "none";
smoothScroll(document.getElementById('about'));
} else {
dots.style.display = "none";
btnText.innerHTML = "Read less";
moreText.style.display = "inline";
}
}
window.smoothScroll = function(target) {
var scrollContainer = target;
do { //find scroll container
scrollContainer = scrollContainer.parentNode;
if (!scrollContainer) return;
scrollContainer.scrollTop += 1;
} while (scrollContainer.scrollTop == 0);
var targetY = 0;
do { //find the top of target relatively to the container
if (target == scrollContainer) break;
targetY += target.offsetTop;
} while (target = target.offsetParent);
scroll = function(c, a, b, i) {
i++; if (i > 30) return;
c.scrollTop = a + (b - a) / 30 * i;
setTimeout(function(){ scroll(c, a, b, i); }, 20);
}
// start scrolling
scroll(scrollContainer, scrollContainer.scrollTop, targetY, 0);
}
.about{
font-size:16px;
font-weight:599;
width:65%;
float:right;
margin:55px 40px 70px 0;
display:block;
}
#more{
display:none;
}
#myBtn{
outline:0;
border:1px solid #000;
background:#fff;
color:#4f9190;
font-family: bonvenocf-light;
font-size:12px;
font-weight: bold;
text-transform:uppercase;
letter-spacing:2px;
line-height:40px;
vertical-align:top;
width: 50%;
border-radius: 0px;
display:block;
margin:-10px auto 0;
padding:0 5px 0 20px;
}
<div class="about" id="about">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut velit nunc, semper ac nunc quis, interdum suscipit nisi. Fusce sagittis vitae lorem vel porta. Sed eget elit commodo, lacinia dui vulputate, accumsan tellus. Nullam lorem est, consectetur id ultrices vitae, aliquam ac purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas rutrum, enim ut luctus volutpat, tortor ex efficitur felis, vitae fringilla nunc mauris ac nisi. Etiam ut blandit leo, vitae dignissim mi. Suspendisse vestibulum felis hendrerit, eleifend dui vitae, suscipit nunc. Phasellus finibus velit ac purus rutrum maximus. Etiam ut eleifend ligula, eget tincidunt lacus.</p>
<span id="dots"></span>
<span id="more">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut velit nunc, semper ac nunc quis, interdum suscipit nisi. Fusce sagittis vitae lorem vel porta. Sed eget elit commodo, lacinia dui vulputate, accumsan tellus. Nullam lorem est, consectetur id ultrices vitae, aliquam ac purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas rutrum, enim ut luctus volutpat, tortor ex efficitur felis, vitae fringilla nunc mauris ac nisi. Etiam ut blandit leo, vitae dignissim mi. Suspendisse vestibulum felis hendrerit, eleifend dui vitae, suscipit nunc. Phasellus finibus velit ac purus rutrum maximus. Etiam ut eleifend ligula, eget tincidunt lacus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut velit nunc, semper ac nunc quis, interdum suscipit nisi. Fusce sagittis vitae lorem vel porta. Sed eget elit commodo, lacinia dui vulputate, accumsan tellus. Nullam lorem est, consectetur id ultrices vitae, aliquam ac purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas rutrum, enim ut luctus volutpat, tortor ex efficitur felis, vitae fringilla nunc mauris ac nisi. Etiam ut blandit leo, vitae dignissim mi. Suspendisse vestibulum felis hendrerit, eleifend dui vitae, suscipit nunc. Phasellus finibus velit ac purus rutrum maximus. Etiam ut eleifend ligula, eget tincidunt lacus.</p>
</span>
<button onclick="myFunction()" id="myBtn">Read More</button>
</div>
我的页面 header 上显示了一些段落。我不想显示所有文本，所以我有一个多读和少读按钮。目前，当点击少读按钮时，页面仍然在中间。我希望当单击少读按钮时它也可以滚动回顶部。我找到了这两个代码，并且都分别为我提供了我想要的功能。我想结合代码，但我不确定如何结合，因为我还在学习 JavaScript.
这是编码（提前致谢）：
function myFunction() {
var dots = document.getElementById("dots");
var moreText = document.getElementById("more");
var btnText = document.getElementById("myBtn");
if (dots.style.display === "none") {
dots.style.display = "inline";
btnText.innerHTML = "Read more";
moreText.style.display = "none";
} else {
dots.style.display = "none";
btnText.innerHTML = "Read less";
moreText.style.display = "inline";
}
}
window.smoothScroll = function(target) {
var scrollContainer = target;
do { //find scroll container
scrollContainer = scrollContainer.parentNode;
if (!scrollContainer) return;
scrollContainer.scrollTop += 1;
} while (scrollContainer.scrollTop == 0);
var targetY = 0;
do { //find the top of target relatively to the container
if (target == scrollContainer) break;
targetY += target.offsetTop;
} while (target = target.offsetParent);
scroll = function(c, a, b, i) {
i++; if (i > 30) return;
c.scrollTop = a + (b - a) / 30 * i;
setTimeout(function(){ scroll(c, a, b, i); }, 20);
}
// start scrolling
scroll(scrollContainer, scrollContainer.scrollTop, targetY, 0);
}
#more{
display: none;
}
#myBtn{
border:1px solid #000 /*none*/;
background:none;
font-family:caviardreams;
font-size: 13px;
text-transform: uppercase;
font-weight:bold;
padding:0 10px 0 10px;
margin:-5px 0 0 5px;
letter-spacing:5px;
}.first{
width:100%;
}
.second {
width: 40%;
}
<div class="second" id="second">
<p>sum dolor sit amet, ex pri utamur volumus, usu graece platonem an. Possit labitur assueverit et pro. Eum in erant dictas mnesarchum, sed veritus perfecto menandri et, graece omittam mea cu. Exerci facilisis intellegat has ea, cu sea explicari assentior appellantur, tale offendit pertinax ut vel. Id viris consectetuer sed. Mea ea wisi suscipit voluptaria.</p>
<span id="dots"><button onclick="myFunction()" id="myBtn">Read more</button></span>
<span id="more"><span id="less">
<p>sum dolor sit amet, ex pri utamur volumus, usu graece platonem an. Possit labitur assueverit et pro. Eum in erant dictas mnesarchum, sed veritus perfecto menandri et, graece omittam mea cu. Exerci facilisis intellegat has ea, cu sea explicari assentior appellantur, tale offendit pertinax ut vel. Id viris consectetuer sed. Mea ea wisi suscipit voluptaria.</p>
<p>sum dolor sit amet, ex pri utamur volumus, usu graece platonem an. Possit labitur assueverit et pro. Eum in erant dictas mnesarchum, sed veritus perfecto menandri et, graece omittam mea cu. Exerci facilisis intellegat has ea, cu sea explicari assentior appellantur, tale offendit pertinax ut vel. Id viris consectetuer sed. Mea ea wisi suscipit voluptaria.</p>
<p>sum dolor sit amet, ex pri utamur volumus, usu graece platonem an. Possit labitur assueverit et pro. Eum in erant dictas mnesarchum, sed veritus perfecto menandri et, graece omittam mea cu. Exerci facilisis intellegat has ea, cu sea explicari assentior appellantur, tale offendit pertinax ut vel. Id viris consectetuer sed. Mea ea wisi suscipit voluptaria.</p>
<div class="first"><button type="button" onclick="smoothScroll(document.getElementById('second'))">Click Me!</button></div>
<span id="dots"><button onclick="myFunction()" id="myBtn">Read Less</button></span>
</span></span>
</div>
点击此处按钮执行回滚到顶部的功能：
<div class="first"><button type="button" onclick="smoothScroll(document.getElementById('second'))">Click Me!</button></div>
onclick部分触发JavaScript代码中的smothScroll()函数。
现在Read Less部分在myFunction()的if条件下执行。如果您在 if 条件的底部添加 smoothScroll() 它应该可以正常工作：
if (dots.style.display === "none") {
dots.style.display = "inline";
btnText.innerHTML = "Read more";
moreText.style.display = "none";
smoothScroll(document.getElementById('second')); // <-- here
}
既然您知道如何实现您想要的，我建议您稍微清理一下代码并尝试了解一切是如何工作的。您还可以 google 关于现代 JavaScript 等。这将是提高您的 JavaScript 知识的一个很好的练习。
function myFunction() {
var dots = document.getElementById("dots");
var moreText = document.getElementById("more");
var btnText = document.getElementById("myBtn");
if (dots.style.display === "none") {
dots.style.display = "inline";
btnText.innerHTML = "Read more";
moreText.style.display = "none";
smoothScroll(document.getElementById('about'));
} else {
dots.style.display = "none";
btnText.innerHTML = "Read less";
moreText.style.display = "inline";
}
}
window.smoothScroll = function(target) {
var scrollContainer = target;
do { //find scroll container
scrollContainer = scrollContainer.parentNode;
if (!scrollContainer) return;
scrollContainer.scrollTop += 1;
} while (scrollContainer.scrollTop == 0);
var targetY = 0;
do { //find the top of target relatively to the container
if (target == scrollContainer) break;
targetY += target.offsetTop;
} while (target = target.offsetParent);
scroll = function(c, a, b, i) {
i++; if (i > 30) return;
c.scrollTop = a + (b - a) / 30 * i;
setTimeout(function(){ scroll(c, a, b, i); }, 20);
}
// start scrolling
scroll(scrollContainer, scrollContainer.scrollTop, targetY, 0);
}
.about{
font-size:16px;
font-weight:599;
width:65%;
float:right;
margin:55px 40px 70px 0;
display:block;
}
#more{
display:none;
}
#myBtn{
outline:0;
border:1px solid #000;
background:#fff;
color:#4f9190;
font-family: bonvenocf-light;
font-size:12px;
font-weight: bold;
text-transform:uppercase;
letter-spacing:2px;
line-height:40px;
vertical-align:top;
width: 50%;
border-radius: 0px;
display:block;
margin:-10px auto 0;
padding:0 5px 0 20px;
}
<div class="about" id="about">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut velit nunc, semper ac nunc quis, interdum suscipit nisi. Fusce sagittis vitae lorem vel porta. Sed eget elit commodo, lacinia dui vulputate, accumsan tellus. Nullam lorem est, consectetur id ultrices vitae, aliquam ac purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas rutrum, enim ut luctus volutpat, tortor ex efficitur felis, vitae fringilla nunc mauris ac nisi. Etiam ut blandit leo, vitae dignissim mi. Suspendisse vestibulum felis hendrerit, eleifend dui vitae, suscipit nunc. Phasellus finibus velit ac purus rutrum maximus. Etiam ut eleifend ligula, eget tincidunt lacus.</p>
<span id="dots"></span>
<span id="more">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut velit nunc, semper ac nunc quis, interdum suscipit nisi. Fusce sagittis vitae lorem vel porta. Sed eget elit commodo, lacinia dui vulputate, accumsan tellus. Nullam lorem est, consectetur id ultrices vitae, aliquam ac purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas rutrum, enim ut luctus volutpat, tortor ex efficitur felis, vitae fringilla nunc mauris ac nisi. Etiam ut blandit leo, vitae dignissim mi. Suspendisse vestibulum felis hendrerit, eleifend dui vitae, suscipit nunc. Phasellus finibus velit ac purus rutrum maximus. Etiam ut eleifend ligula, eget tincidunt lacus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut velit nunc, semper ac nunc quis, interdum suscipit nisi. Fusce sagittis vitae lorem vel porta. Sed eget elit commodo, lacinia dui vulputate, accumsan tellus. Nullam lorem est, consectetur id ultrices vitae, aliquam ac purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas rutrum, enim ut luctus volutpat, tortor ex efficitur felis, vitae fringilla nunc mauris ac nisi. Etiam ut blandit leo, vitae dignissim mi. Suspendisse vestibulum felis hendrerit, eleifend dui vitae, suscipit nunc. Phasellus finibus velit ac purus rutrum maximus. Etiam ut eleifend ligula, eget tincidunt lacus.</p>
</span>
<button onclick="myFunction()" id="myBtn">Read More</button>
</div>