I am creating a kind of website/experiment just based on plain text, no images or anything else, that consists on just one <div> containing several <span> and <a> elements which open on click using JS, revealing text that stacks at the bottom of the <div>.
The problem comes when there is too much text covering the screen, and the user keeps clicking -and therefore, revealing more text-, these new lines, which keep stacking at the bottom, are not automatically visible: the user has to start scrolling to keep reading.
Is there a way I can automatically place the bottom of the <div> in the center of the screen, so it kind of doesn't need scroll? Do you think of any better workaround to avoid manual scrolling when the text fills the whole screen up?
Thanks!
Edit: I added a piece of code for better understanding of what I made.
<div id="container">
<p class="fade-in">
<a data-opens="1" href="#">Hello</a>.<span data-openedby="1" class="fade-in"> How are <a data-opens="2" href="#">you</a>? </span><span class="fade-in" data-openedby="2"><a data-opens="3" href="#">Welcome</a> to my website.</span>
</p>
</div>Basically, this piece of code, but instead of just three <a>, it has so far 300 of them with their respective <span>.
What about something like this:
CSS:
button {
position: relative;
z-index: 10;
}
div {
position: fixed;
bottom: 50%;
}
HTML:
<button>Click me!</button>
<div>
<span>1. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span><br><br>
</div>
jQuery:
var counter = 1; // to help distinguish new content
$('button').on('click', function(){
$('div').append('<span>' + counter + '. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span><br><br>');
});
If I understand your question correctly, you don't want to change the bottom of the <div> box but to make it automatically scrolled to the bottom of the content.
That can be done by making the content div a single child of a reversed flex container, and applying the scroll to the container. Here is an example:
HTML
<div class="bottom-oriented">
<div id="content">
<div>Top</div>
</div>
</div>
CSS
.bottom-oriented {
max-height: 100px;
overflow: auto;
display: flex;
flex-direction: column-reverse;
}
#content {
border: 1px solid;
}
JS for demonstrating the behavior
var parent = document.getElementById("content"),
i = 0;
window.setInterval(function () {
var newEl = document.createElement("div");
i++;
newEl.textContent = "Text " + i;
parent.append(newEl);
}, 3000);