0

So I finally got this animation up and running but when the animation runs it jerks the user to the top of the page and I'd like to prevent that from happening

I only found one instance of this problem, but it was with jquery not js: JQuery animation makes page jump to top

and the solution unfortunately isn't applicable.

Here's a video example of what's going on.

https://www.loom.com/share/c01501a08221486fba09da1b3e6c362f

Here's all my code for the page.

edit: new code works but isn't smooth animation

edit: Got it! Below snippet works. Thanks.

function printDays() {

  var today = new Date();
  var business_days = 2;

  var deliveryDate = today;
  var total_days = business_days;
  for(var days=1; days <= total_days; days++) {
   deliveryDate = new Date(today.getTime() + (days *24*60*60*1000));
  if(deliveryDate.getDay() == 0 || deliveryDate.getDay() == 6) {
  total_days++
     }
  } 
 var deliveryDayNumber = deliveryDate.getDay();
 var deliveryDay = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"] 
[deliveryDayNumber];
  const months = [
     'January',
     'February',
     'March',
     'April',
     'May',
     'June',
     'July',
     'August',
     'September',
     'October',
     'November',
     'December'
   ];
   const monthIndex = deliveryDate.getMonth();
   const monthName = months[monthIndex];
   const deliveryNumber = deliveryDate.getDate();
   const formatted = `${deliveryDay} - ${monthName} ${deliveryNumber}`;
   document.getElementById("deliveryEstimateDay").innerHTML = formatted;

  }

printDays()


setTimeout(function(){
document.getElementById('deliveryDiv').style.transform = 'translatex(0vw)';
}, 100);
document.getElementById("deliveryDiv").style.transitionDuration = "500ms";
#deliveryDiv{
      position: relative;
      transform: translateX(100vw);
}
<div class="buttonbox">
   <h4 class="paragraph">Free Delivery:&nbsp;</h4> 
   <div id="deliveryDiv">
        <h3 id="deliveryEstimateDay" class="paragraph"> 
         &nbsp;&nbsp;&nbsp;- &nbsp;&nbsp;&nbsp;
        </h3>
   </div>
   <a class="link" href="checkout.html"><button class="actionbutton">Buy Now →</button></a>
   <hr class="dividermid">
</div>

0 Answers0