JAVASCRIPT

js scrollIntoView

const options = {
  inline: 'start',
  block: 'start',
  behavior: 'smooth'
}

htmlDiv.scrollIntoView(options)

/*
- behavior Optional
Defines the transition animation. One of auto or smooth. Defaults to auto.

- block Optional
Defines vertical alignment. One of start, center, end, or nearest.
Defaults to start.

- inline Optional
Defines horizontal alignment. One of start, center, end, or nearest. 
Defaults to nearest.
*/

scrollintoview javascript

// 1.
// <a class="nav__link" href="#section--1">Features</a>
document.querySelectorAll('.nav__link').forEach(item => {
  item.addEventListener('click', function (e) {
    e.preventDefault();
    document
      .querySelector(this.getAttribute('href'))
      .scrollIntoView({ behavior: 'smooth' });
  });
});

// 2.
// <ul class="nav__links"> ...
// <a class="nav__link" href="#section--1">Features</a>
document.querySelector('.nav__links').addEventListener('click', function (e) {
  e.preventDefault();
  if (e.target.classList.contains('nav__link')) {
    document
      .querySelector(e.target.getAttribute('href'))
      .scrollIntoView({ behavior: 'smooth' });
  }
});

scrollIntoView

const assert = require('assert')

describe('v5.webdriver.io', () => {

    it('should demonstrate the scrollIntoView command', async () => {

        await browser.url('https://v5.webdriver.io');

        const GitHub = await $('#footer [href="https://github.com/webdriverio/webdriverio"]')
        await GitHub.scrollIntoView();// scroll to specific element

        await browser.pause(4000);


    })    
    
    it('should demonstrate the scrollIntoView command', async () => {

        await browser.url('https://v5.webdriver.io');
        const getstarted = await $('[src="https://badge.fury.io/js/webdriverio.svg"]')
        await getstarted.scrollIntoView();// scroll to specific element

        await browser.pause(4000);
    
    })



})