What do you need?

  1. an html file linked to a javascript file or simply a script tag within ur html
  2. the following code!

html


<!-- site updates -->
<div class="updates">
    <h2>updates</h2>
    <br> <!-- new entries start below this line -->
    <div class="update-entry" id="entry3">
        <h3>date:<a href="#entry2" class="next-button">next</a><a href="" class="prev-button">prev</a></h3>
        <p>Cat ipsum dolor sit amet, Cuddle no cuddle cuddle love scratch scratch cat slap dog in face claw drapes prow?? ew dog, yum yum warm milk hotter pls,</p>
    </div>
    <div class="update-entry" id="entry2">
        <h3>date:<a href="#entry1" class="next-button">next</a><a href="#entry3" class="prev-button">prev</a></h3>
        <p>Cat ipsum dolor sit amet, Cuddle no cuddle cuddle love scratch scratch cat slap dog in face claw drapes prow?? ew dog, yum yum warm milk hotter pls,</p>
    </div>
    <div class="update-entry" id="entry1">
        <h3>date:<a href="#entry2" class="prev-button">prev</a></h3>
        <p>Cat ipsum dolor sit amet, Cuddle no cuddle cuddle love scratch scratch cat slap dog in face claw drapes prow?? ew dog, yum yum warm milk hotter pls,</p>
    </div>
</div>

css


/* this is the whole container */
.updates{
    background-color: #fff;
    width: 300px;
    height: 200px;
    overflow-y: scroll;
    border: 5px red solid;
    padding: 10px 15px;
}

/* the containers "updates" header */
.updates h2{
    text-align: center;
    color: salmon;
    font-size: 20px;
    text-decoration: underline;
}

/* the entry's date */
.update-entry h3{
    font-size:18px;
    color: maroon;
    padding: 20px 0;
}

/* the entry's paragraph */
.update-entry p{
    padding-bottom: 10px;
    color: black;
}

/* the next and prev buttons */
.update-entry a{
    margin: 0 10px;
    font-size: 13px;
    color: blue;
}

javascript


// smooth scroll function
function smoothScroll(event) {
    event.preventDefault();

    const targetId = this.getAttribute('href').substring(1);
    const targetElement = document.getElementById(targetId);
    if (targetElement) {
        const container = document.querySelector('.updates');
        const targetPosition = targetElement.offsetTop - container.offsetTop;
        container.scrollTo({
            top: targetPosition,
            behavior: 'smooth' // smooth scroll
        });
    }
}

// add the event to .next-button
document.querySelectorAll('.next-button').forEach(button => {
    button.addEventListener('click', smoothScroll);
});

// add the event to .prev-button
document.querySelectorAll('.prev-button').forEach(button => {
    button.addEventListener('click', smoothScroll);
});

to add another entry, simply copy and paste the whole "update-entry" div! you'll need to manually change the href so it links to the next and the previous entry. (its very straight forward)


below is the expected result!

updates


date:nextprev

Cat ipsum dolor sit amet, Cuddle no cuddle cuddle love scratch scratch cat slap dog in face claw drapes prow?? ew dog, yum yum warm milk hotter pls (3rd entry)

date:nextprev

Cat ipsum dolor sit amet, Cuddle no cuddle cuddle love scratch scratch cat slap dog in face claw drapes prow?? ew dog, yum yum warm milk hotter pls (2nd entry)

date:prev

Cat ipsum dolor sit amet, Cuddle no cuddle cuddle love scratch scratch cat slap dog in face claw drapes prow?? ew dog, yum yum warm milk hotter pls (1st entry)

do!

  • edit and customize
  • share (pls), give credit and say ty

dont!

  • claim as yours
  • dont just copy-paste and make ZERO change to the css,, make it unique!

if u have any issue setting it up or if the code is odd or incorrect (sorry :C) contact me on discord: @kiyuae