Smooth Scrolling with Just Pure CSS

Smooth scrolling with just pure css

You can do this with pure CSS but you will need to hard code the offset scroll amounts, which may not be ideal should you be changing page content- or should dimensions of your content change on say window resize.

You're likely best placed to use e.g. jQuery, specifically:

$('html, body').stop().animate({
   scrollTop: element.offset().top
}, 1000);

A complete implementation may be:

$('#up, #down').on('click', function(e){
    e.preventDefault();
    var target= $(this).get(0).id == 'up' ? $('#down') : $('#up');
    $('html, body').stop().animate({
       scrollTop: target.offset().top
    }, 1000);
});

Where element is the target element to scroll to and 1000 is the delay in ms before completion.

Demo Fiddle

The benefit being, no matter what changes to your content dimensions, the function will not need to be altered.

Pure CSS scroll animation

You can do it with anchor tags using css3 :target pseudo-selector, this selector is going to be triggered when the element with the same id as the hash of the current URL get an match. Example

Knowing this, we can combine this technique with the use of proximity selectors like "+" and "~" to select any other element through the target element who id get match with the hash of the current url. An example of this would be something like what you are asking.

smooth scroll transition upon click using CSS only (no JavaScript allowed)

You can use scroll-behavior: smooth;

html {
  scroll-behavior: smooth;
}
p {
    margin-bottom: 600px;
}

a {
    text-decoration: none;
    background-color: red;
    color: white;
    padding: 5px;
    position: fixed;
    bottom: 40px;
    right: 40px;
    transition: 1s all linear;
    -webkit-transition: 1s all linear;
    -moz-transition: 1s all linear;
    -ms-transition: 1s all linear;
    -o-transition: 1s all linear;
}

<a href="#one">Up</a>
<p id="one">One</p>
<p>Two</p>
<p>Three</p>
<p>Four</p>

Pure CSS Continuous Horizontal Text Scroll Without Break

You could try having two marquees and set one of them with a delayed animation of 2.5s which is half the time of the full animation (5s).

.marquee {  margin: 0 auto;  white-space: nowrap;  overflow: hidden;  position: absolute;}
.marquee span {  display: inline-block;  padding-left: 100%;  animation: marquee 5s linear infinite;}
.marquee2 span {  animation-delay: 2.5s;}
@keyframes marquee {  0% {    transform: translate(0, 0);  }  100% {    transform: translate(-100%, 0);  }}

<p class="marquee">  <span>This is text - This is text - This is text - This is text - This is text - This is text - This is text - This is text - This is text - This is text - This is text - This is text - </span></p><p class="marquee marquee2">  <span>This is text - This is text - This is text - This is text - This is text - This is text - This is text - This is text - This is text - This is text - This is text - This is text - </span></p>

---

Related Topics