JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<div id="blogSection">
    <div class="row" id="scrollUp">
        <button class="scrollButton" id="upClick">Scroll Up</button>
    </div>
    <div id="homeBlogs">
        <div class="rss-box">
            <p class="rss-title"></p>
            <ul class="rss-items">
                <li class="rss-item active">
                    <p>ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent</p>
                    <p>ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent</p>
                    <p>ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent</p>
                    <p>ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent</p>
                    <p>ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent</p>
                    <p>ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent</p>
                </li>
                <li class="rss-item">
                   ...

CSS

button{
	display:block;
	width:100%;
	background-color:black;
	color:white;
	height:50px;
	cursor:pointer;
}
#scrollUp{
	position:fixed;
	top:0;
	left:0;
	width:100%;
}
#scrollDown{
	position:fixed;
	bottom:0;
	left:0;
	width:100%;
}
.active{
	color:red;
}

JavaScript

$(document).ready(function() {
/*
    var scrollTime = 900;


	$('#upClick').click(function() {
        $('#homeBlogs').animate({
            scrollTop: $('#homeBlogs').scrollTop() + 200
        }, scrollTime);
    });


    $('#downClick').click(function() {
        $('#homeBlogs').animate({
            scrollTop: $('#homeBlogs').scrollTop() - 200
        }, scrollTime);
    });
*/

})
//we can use one single event and modify the behavior based on the direction that was clicked
.on('click', '.scrollButton', function(){
	var scrollTime = 900,
		direction = $(this).attr('id'),
		$currentItem = $('.rss-item.active'),
		$newItem;
	
	switch(direction){
		case 'upClick':
			$newItem = $currentItem.prev('.rss-item');
		break;
		
		case 'downClick':
			$newItem = $currentItem.next('.rss-item');
		break;
	}
	
	//if we aren't at the top or bottom of the list already
	if($newItem.length > 0){
		//since we know we can now change the active item, we need to remove this class so we can apply it to the new item
		$('.rss-item').removeClass('active');
		
		$newItem.addClass('active');
	}
	
	//Now that the logic is out of the way, we can run the scroll animation
	//Also, I think you will want to use 'html, body' as a selector so the page itself moves
	$('html, body').animate({
        scrollTop: $('.rss-item.active').offset().top - 200 //this will keep content positioned correctly, but you shouldn't need both a '+ 200' and '- 200' here. Adjust this value as needed.
	}, scrollTime);
})
;