How do I combined these code? (Read more, Read Less with Scroll To Top)

Question

I have a few paragraphs displayed on the header of my page. I don't want all the text to show so I have a read more and read less button. Currently when the read less button is clicked the page remains in the middle. I'd like for when the read less button is clicked for it to also scroll back to top. I found these two codes and both give me my desired function separately. I would like to combine the code but I am unsure how as I am still learning JavaScript.

Here's the coding (Thanks In Advance):

		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>

Answer 1

The function which scrolls back to the top is executed when you click the button here:

<div class="first"><button type="button" onclick="smoothScroll(document.getElementById('second'))">Click Me!</button></div>

The onclick part triggers the smothScroll() function in the JavaScript code.

Now the Read Less part is executed in myFunction() in the if condition. If you add the smoothScroll() at the bottom of the if condition it should work as you want:

if (dots.style.display === "none") {
    dots.style.display = "inline";
    btnText.innerHTML = "Read more"; 
    moreText.style.display = "none";
    smoothScroll(document.getElementById('second')); // <-- here
}

Now that you know how you can achieve what you want, I would suggest that you clean up the code a little bit and try to understand how everything works. You could also google about modern JavaScript etc. This would be a good exercise to improve your JavaScript knowledge.