How to use scrollto method in Cypress

1const { $ } = Cypress.$Cypress2const { _ } = Cypress3describe('src/cy/commands/actions/scroll', () => {4  before(() => {5    cy6    .visit('/fixtures/scrolling.html')7    .then(function (win) {8      this.body = win.document.body.outerHTML9    })10  })11  beforeEach(function () {12    const doc = cy.state('document')13    $(doc.body).empty().html(this.body)14    cy.viewport(600, 200)15  })16  context('#scrollTo', () => {17    beforeEach(function () {18      this.win = cy.state('window')19      this.scrollVert = cy.$$('#scroll-to-vertical')20      this.scrollHoriz = cy.$$('#scroll-to-horizontal')21      this.scrollBoth = cy.$$('#scroll-to-both')22      // reset the scrollable containers back23      // to furthest left and top24      this.win.scrollTop = 025      this.win.scrollLeft = 026      this.scrollVert.scrollTop = 027      this.scrollVert.scrollLeft = 028      this.scrollHoriz.scrollTop = 029      this.scrollHoriz.scrollLeft = 030      this.scrollBoth.scrollTop = 031      this.scrollBoth.scrollLeft = 032    })33    describe('subject', () => {34      it('is window by default', () => {35        cy.scrollTo('125px').then(function (win2) {36          expect(this.win).to.eq(win2)37        })38      })39      it('is DOM', () => {40        cy.get('#scroll-to-vertical').scrollTo('125px').then(function ($el) {41          expect($el.get(0)).to.eq(this.scrollVert.get(0))42        })43      })44      it('can use window', () => {45        cy.window().scrollTo('10px').then((win) => {46          expect(win.scrollX).to.eq(10)47        })48      })49      it('can handle window w/length > 1 as a subject', () => {50        cy.visit('/fixtures/dom.html')51        cy.window().should('have.length.gt', 1)52        .scrollTo('10px')53      })54    })55    describe('x axis only', () => {56      it('scrolls x axis to num px', function () {57        expect(this.scrollHoriz.get(0).scrollTop).to.eq(0)58        expect(this.scrollHoriz.get(0).scrollLeft).to.eq(0)59        cy.get('#scroll-to-horizontal').scrollTo(300).then(function () {60          expect(this.scrollHoriz.get(0).scrollTop).to.eq(0)61          expect(this.scrollHoriz.get(0).scrollLeft).to.eq(300)62        })63      })64      it('scrolls x axis to px', function () {65        expect(this.scrollHoriz.get(0).scrollTop).to.eq(0)66        expect(this.scrollHoriz.get(0).scrollLeft).to.eq(0)67        cy.get('#scroll-to-horizontal').scrollTo('125px').then(function () {68          expect(this.scrollHoriz.get(0).scrollTop).to.eq(0)69          expect(this.scrollHoriz.get(0).scrollLeft).to.eq(125)70        })71      })72      it('scrolls x axis by % of scrollable height', function () {73        expect(this.scrollHoriz.get(0).scrollTop).to.eq(0)74        expect(this.scrollHoriz.get(0).scrollLeft).to.eq(0)75        cy.get('#scroll-to-horizontal').scrollTo('50%').then(function () {76          // they don't calculate the height of the container77          // in the percentage of the scroll (since going the height78          // of the container wouldn't scroll at all...)79          expect(this.scrollHoriz.get(0).scrollTop).to.eq(0)80          expect(this.scrollHoriz.get(0).scrollLeft).to.eq((500 - 100) / 2)81        })82      })83    })84    describe('position arguments', () => {85      it('scrolls x/y axis to topLeft', function () {86        expect(this.scrollBoth.get(0).scrollTop).to.eq(0)87        expect(this.scrollBoth.get(0).scrollLeft).to.eq(0)88        cy.get('#scroll-to-both').scrollTo('topLeft').then(function () {89          expect(this.scrollBoth.get(0).scrollTop).to.eq(0)90          expect(this.scrollBoth.get(0).scrollLeft).to.eq(0)91        })92      })93      it('scrolls x/y axis to top', function () {94        expect(this.scrollBoth.get(0).scrollTop).to.eq(0)95        expect(this.scrollBoth.get(0).scrollLeft).to.eq(0)96        cy.get('#scroll-to-both').scrollTo('top').then(function () {97          expect(this.scrollBoth.get(0).scrollTop).to.eq(0)98          expect(this.scrollBoth.get(0).scrollLeft).to.eq((500 - 100) / 2)99        })100      })101      it('scrolls x/y axis to topRight', function () {102        expect(this.scrollBoth.get(0).scrollTop).to.eq(0)103        expect(this.scrollBoth.get(0).scrollLeft).to.eq(0)104        cy.get('#scroll-to-both').scrollTo('topRight').then(function () {105          expect(this.scrollBoth.get(0).scrollTop).to.eq(0)106          expect(this.scrollBoth.get(0).scrollLeft).to.eq((500 - 100))107        })108      })109      it('scrolls x/y axis to left', function () {110        expect(this.scrollBoth.get(0).scrollTop).to.eq(0)111        expect(this.scrollBoth.get(0).scrollLeft).to.eq(0)112        cy.get('#scroll-to-both').scrollTo('left').then(function () {113          expect(this.scrollBoth.get(0).scrollTop).to.eq((500 - 100) / 2)114          expect(this.scrollBoth.get(0).scrollLeft).to.eq(0)115        })116      })117      it('scrolls x/y axis to center', function () {118        expect(this.scrollBoth.get(0).scrollTop).to.eq(0)119        expect(this.scrollBoth.get(0).scrollLeft).to.eq(0)120        cy.get('#scroll-to-both').scrollTo('center').then(function () {121          expect(this.scrollBoth.get(0).scrollTop).to.eq((500 - 100) / 2)122          expect(this.scrollBoth.get(0).scrollLeft).to.eq((500 - 100) / 2)123        })124      })125      it('scrolls x/y axis to right', function () {126        expect(this.scrollBoth.get(0).scrollTop).to.eq(0)127        expect(this.scrollBoth.get(0).scrollLeft).to.eq(0)128        cy.get('#scroll-to-both').scrollTo('right').then(function () {129          expect(this.scrollBoth.get(0).scrollTop).to.eq((500 - 100) / 2)130          expect(this.scrollBoth.get(0).scrollLeft).to.eq((500 - 100))131        })132      })133      it('scrolls x/y axis to bottomLeft', function () {134        expect(this.scrollBoth.get(0).scrollTop).to.eq(0)135        expect(this.scrollBoth.get(0).scrollLeft).to.eq(0)136        cy.get('#scroll-to-both').scrollTo('bottomLeft').then(function () {137          expect(this.scrollBoth.get(0).scrollTop).to.eq((500 - 100))138          expect(this.scrollBoth.get(0).scrollLeft).to.eq(0)139        })140      })141      it('scrolls x/y axis to bottom', function () {142        expect(this.scrollBoth.get(0).scrollTop).to.eq(0)143        expect(this.scrollBoth.get(0).scrollLeft).to.eq(0)144        cy.get('#scroll-to-both').scrollTo('bottom').then(function () {145          expect(this.scrollBoth.get(0).scrollTop).to.eq((500 - 100))146          expect(this.scrollBoth.get(0).scrollLeft).to.eq((500 - 100) / 2)147        })148      })149      it('scrolls x/y axis to bottomRight', function () {150        expect(this.scrollBoth.get(0).scrollTop).to.eq(0)151        expect(this.scrollBoth.get(0).scrollLeft).to.eq(0)152        cy.get('#scroll-to-both').scrollTo('bottomRight').then(function () {153          expect(this.scrollBoth.get(0).scrollTop).to.eq((500 - 100))154          expect(this.scrollBoth.get(0).scrollLeft).to.eq((500 - 100))155        })156      })157    })158    describe('scroll both axis', () => {159      it('scrolls both x and y axis num of px', function () {160        expect(this.scrollBoth.get(0).scrollTop).to.eq(0)161        expect(this.scrollBoth.get(0).scrollLeft).to.eq(0)162        cy.get('#scroll-to-both').scrollTo(300, 150).then(function () {163          expect(this.scrollBoth.get(0).scrollTop).to.eq(150)164          expect(this.scrollBoth.get(0).scrollLeft).to.eq(300)165        })166      })167      it('scrolls x to 0 and y num of px', function () {168        expect(this.scrollBoth.get(0).scrollTop).to.eq(0)169        expect(this.scrollBoth.get(0).scrollLeft).to.eq(0)170        cy.get('#scroll-to-both').scrollTo(0, 150).then(function () {171          expect(this.scrollBoth.get(0).scrollTop).to.eq(150)172          expect(this.scrollBoth.get(0).scrollLeft).to.eq(0)173        })174      })175      it('scrolls x num of px and y to 0 ', function () {176        expect(this.scrollBoth.get(0).scrollTop).to.eq(0)177        expect(this.scrollBoth.get(0).scrollLeft).to.eq(0)178        cy.get('#scroll-to-both').scrollTo(150, 0).then(function () {179          expect(this.scrollBoth.get(0).scrollTop).to.eq(0)180          expect(this.scrollBoth.get(0).scrollLeft).to.eq(150)181        })182      })183      it('scrolls both x and y axis of px', function () {184        expect(this.scrollBoth.get(0).scrollTop).to.eq(0)185        expect(this.scrollBoth.get(0).scrollLeft).to.eq(0)186        cy.get('#scroll-to-both').scrollTo('300px', '150px').then(function () {187          expect(this.scrollBoth.get(0).scrollTop).to.eq(150)188          expect(this.scrollBoth.get(0).scrollLeft).to.eq(300)189        })190      })191      it('scrolls both x and y axis of percentage', function () {192        expect(this.scrollBoth.get(0).scrollTop).to.eq(0)193        expect(this.scrollBoth.get(0).scrollLeft).to.eq(0)194        cy.get('#scroll-to-both').scrollTo('50%', '50%').then(function () {195          expect(this.scrollBoth.get(0).scrollTop).to.eq((500 - 100) / 2)196          expect(this.scrollBoth.get(0).scrollLeft).to.eq((500 - 100) / 2)197        })198      })199      it('scrolls x to 0 and y percentage', function () {200        expect(this.scrollBoth.get(0).scrollTop).to.eq(0)201        expect(this.scrollBoth.get(0).scrollLeft).to.eq(0)202        cy.get('#scroll-to-both').scrollTo('0%', '50%').then(function () {203          expect(this.scrollBoth.get(0).scrollTop).to.eq((500 - 100) / 2)204          expect(this.scrollBoth.get(0).scrollLeft).to.eq(0)205        })206      })207      it('scrolls x to percentage and y to 0', function () {208        expect(this.scrollBoth.get(0).scrollTop).to.eq(0)209        expect(this.scrollBoth.get(0).scrollLeft).to.eq(0)210        cy.get('#scroll-to-both').scrollTo('50%', '0%').then(function () {211          expect(this.scrollBoth.get(0).scrollTop).to.eq(0)212          expect(this.scrollBoth.get(0).scrollLeft).to.eq((500 - 100) / 2)213        })214      })215    })216    describe('scrolls with options', () => {217      it('calls jQuery scroll to', () => {218        const scrollTo = cy.spy($.fn, 'scrollTo')219        cy.get('#scroll-to-both').scrollTo('25px').then(() => {220          expect(scrollTo).to.be.calledWith({ left: '25px', top: 0 })221        })222      })223      it('sets duration to 0 by default', () => {224        const scrollTo = cy.spy($.fn, 'scrollTo')225        cy.get('#scroll-to-both').scrollTo('25px').then(() => {226          expect(scrollTo).to.be.calledWithMatch({}, { duration: 0 })227        })228      })229      it('sets axis to correct xy', () => {230        const scrollTo = cy.spy($.fn, 'scrollTo')231        cy.get('#scroll-to-both').scrollTo('25px', '80px').then(() => {232          expect(scrollTo).to.be.calledWithMatch({}, { axis: 'xy' })233        })234      })235      it('scrolling resolves after a set duration', function () {236        expect(this.scrollHoriz.get(0).scrollTop).to.eq(0)237        expect(this.scrollHoriz.get(0).scrollLeft).to.eq(0)238        const scrollTo = cy.spy($.fn, 'scrollTo')239        cy.get('#scroll-to-horizontal').scrollTo('125px', { duration: 500 }).then(function () {240          expect(scrollTo).to.be.calledWithMatch({}, { duration: 500 })241          expect(this.scrollHoriz.get(0).scrollTop).to.eq(0)242          expect(this.scrollHoriz.get(0).scrollLeft).to.eq(125)243        })244      })245      it('accepts duration string option', () => {246        const scrollTo = cy.spy($.fn, 'scrollTo')247        cy.get('#scroll-to-both').scrollTo('25px', { duration: '500' }).then(() => {248          expect(scrollTo.args[0][1].duration).to.eq('500')249        })250      })251      it('has easing set to swing by default', () => {252        const scrollTo = cy.spy($.fn, 'scrollTo')253        cy.get('#scroll-to-both').scrollTo('25px').then(() => {254          expect(scrollTo.args[0][1].easing).to.eq('swing')255        })256      })257      it('scrolling resolves after easing', function () {258        expect(this.scrollBoth.get(0).scrollTop).to.eq(0)259        expect(this.scrollBoth.get(0).scrollLeft).to.eq(0)260        const scrollTo = cy.spy($.fn, 'scrollTo')261        cy.get('#scroll-to-both').scrollTo('25px', '50px', { easing: 'linear' }).then(function () {262          expect(scrollTo).to.be.calledWithMatch({}, { easing: 'linear' })263          expect(this.scrollBoth.get(0).scrollTop).to.eq(50)264          expect(this.scrollBoth.get(0).scrollLeft).to.eq(25)265        })266      })267      it('retries until element is scrollable', () => {268        const $container = cy.$$('#nonscroll-becomes-scrollable')269        expect($container.get(0).scrollTop).to.eq(0)270        expect($container.get(0).scrollLeft).to.eq(0)271        let retried = false272        cy.on('command:retry', _.after(2, () => {273          $container.css('overflow', 'scroll')274          retried = true275        }))276        cy.get('#nonscroll-becomes-scrollable').scrollTo(500, 300).then(() => {277          expect(retried).to.be.true278          expect($container.get(0).scrollTop).to.eq(300)279          expect($container.get(0).scrollLeft).to.eq(500)280        })281      })282      // https://github.com/cypress-io/cypress/issues/1924283      it('skips scrollability check', () => {284        const scrollTo = cy.spy($.fn, 'scrollTo')285        cy.get('button:first').scrollTo('bottom', { ensureScrollable: false }).then(() => {286          cy.stub(cy, 'ensureScrollability')287          expect(scrollTo).to.be.calledWithMatch({}, { ensureScrollable: false })288          expect(cy.ensureScrollability).not.to.be.called289        })290      })291    })292    describe('assertion verification', () => {293      beforeEach(function () {294        cy.on('log:added', (attrs, log) => {295          if (log.get('name') === 'assert') {296            this.lastLog = log297          }298        })299        return null300      })301      it('eventually passes the assertion', () => {302        cy.on('command:retry', _.after(2, () => {303          cy.$$('#scroll-into-view-horizontal').addClass('scrolled')304        }))305        cy306        .get('#scroll-into-view-horizontal')307        .scrollTo('right')308        .should('have.class', 'scrolled').then(function () {309          const { lastLog } = this310          expect(lastLog.get('name')).to.eq('assert')311          expect(lastLog.get('state')).to.eq('passed')312          expect(lastLog.get('ended')).to.be.true313        })314      })315      it('waits until the subject is scrollable', () => {316        cy.stub(cy, 'ensureScrollability')317        .onFirstCall().throws(new Error())318        cy.on('command:retry', () => {319          return cy.ensureScrollability.returns()320        })321        cy322        .get('#scroll-into-view-horizontal')323        .scrollTo('right').then(() => {324          expect(cy.ensureScrollability).to.be.calledTwice325        })326      })327    })328    describe('errors', {329      defaultCommandTimeout: 50,330    }, () => {331      beforeEach(function () {332        this.logs = []333        cy.on('log:added', (attrs, log) => {334          this.lastLog = log335          this.logs.push(log)336        })337        return null338      })339      it('throws when subject isn\'t scrollable', (done) => {340        cy.on('fail', (err) => {341          expect(err.message).to.include('`cy.scrollTo()` failed because this element is not scrollable:')342          expect(err.message).to.include(`\`<button>button</button>\``)343          expect(err.message).to.include('Make sure you\'re targeting the correct element or use `{ensureScrollable: false}` to disable the scrollable check.')344          expect(err.docsUrl).to.eq('https://on.cypress.io/scrollto')345          done()346        })347        cy.get('button:first').scrollTo('bottom')348      })349      context('subject errors', () => {350        it('throws when not passed DOM element as subject', (done) => {351          cy.on('fail', (err) => {352            expect(err.message).to.include('`cy.scrollTo()` failed because it requires a DOM element.')353            expect(err.message).to.include('{foo: bar}')354            expect(err.message).to.include('> `cy.noop()`')355            done()356          })357          cy.noop({ foo: 'bar' }).scrollTo('250px')358        })359        it('throws if scrollable container is multiple elements', (done) => {360          cy.on('fail', (err) => {361            expect(err.message).to.include('`cy.scrollTo()` can only be used to scroll 1 element, you tried to scroll 2 elements.')362            expect(err.docsUrl).to.eq('https://on.cypress.io/scrollto')363            done()364          })365          cy.get('button').scrollTo('500px')366        })367      })368      context('argument errors', () => {369        it('throws if no args passed', (done) => {370          cy.on('fail', (err) => {371            expect(err.message).to.include('`cy.scrollTo()` must be called with a valid `position`. It can be a string, number or object.')372            expect(err.docsUrl).to.eq('https://on.cypress.io/scrollto')373            done()374          })375          cy.scrollTo()376        })377        it('throws if NaN', (done) => {378          cy.on('fail', (err) => {379            expect(err.message).to.include('`cy.scrollTo()` must be called with a valid `position`. It can be a string, number or object. Your position was: `25, NaN`')380            expect(err.docsUrl).to.eq('https://on.cypress.io/scrollto')381            done()382          })383          cy.get('#scroll-to-both').scrollTo(25, 0 / 0)384        })385        it('throws if Infinity', (done) => {386          cy.on('fail', (err) => {387            expect(err.message).to.include('`cy.scrollTo()` must be called with a valid `position`. It can be a string, number or object. Your position was: `25, Infinity`')388            expect(err.docsUrl).to.eq('https://on.cypress.io/scrollto')389            done()390          })391          cy.get('#scroll-to-both').scrollTo(25, 10 / 0)392        })393        it('throws if unrecognized position', (done) => {394          cy.on('fail', (err) => {395            expect(err.message).to.include('Invalid position argument: `botom`. Position may only be topLeft, top, topRight, left, center, right, bottomLeft, bottom, bottomRight.')396            done()397          })398          cy.get('#scroll-to-both').scrollTo('botom')399        })400      })401      context('option errors', () => {402        it('throws if duration is not a number or valid string', (done) => {403          cy.on('fail', (err) => {404            expect(err.message).to.include('`cy.scrollTo()` must be called with a valid `duration`. Duration may be either a number (ms) or a string representing a number (ms). Your duration was: `foo`')405            expect(err.docsUrl).to.eq('https://on.cypress.io/scrollto')406            done()407          })408          cy.get('#scroll-to-both').scrollTo('25px', { duration: 'foo' })409        })410        it('throws if unrecognized easing', (done) => {411          cy.on('fail', (err) => {412            expect(err.message).to.include('`cy.scrollTo()` must be called with a valid `easing`. Your easing was: `flower`')413            expect(err.docsUrl).to.eq('https://on.cypress.io/scrollto')414            done()415          })416          cy.get('#scroll-to-both').scrollTo('25px', { easing: 'flower' })417        })418        it('throws if ensureScrollable is not a boolean', (done) => {419          cy.on('fail', (err) => {420            expect(err.message).to.include('`cy.scrollTo()` `ensureScrollable` option must be a boolean. You passed: `force`')421            expect(err.docsUrl).to.eq('https://on.cypress.io/scrollto')422            done()423          })424          cy.get('button:first').scrollTo('bottom', { ensureScrollable: 'force' })425        })426      })427    })428    describe('.log', () => {429      beforeEach(function () {430        this.logs = []431        cy.on('log:added', (attrs, log) => {432          this.lastLog = log433          return this.logs.push(log)434        })435        return null436      })437      it('logs out scrollTo', () => {438        cy.get('#scroll-to-both').scrollTo(25).then(function () {439          const { lastLog } = this440          expect(lastLog.get('name')).to.eq('scrollTo')441        })442      })443      it('passes in $el if child command', () => {444        cy.get('#scroll-to-both').scrollTo(25).then(function ($container) {445          const { lastLog } = this446          expect(lastLog.get('$el').get(0)).to.eq($container.get(0))447        })448      })449      it('passes undefined in $el if parent command', () => {450        cy.scrollTo(25).then(function () {451          const { lastLog } = this452          expect(lastLog.get('$el')).to.be.undefined453        })454      })455      it('logs duration options', () => {456        cy.get('#scroll-to-both').scrollTo(25, { duration: 1 }).then(function () {457          const { lastLog } = this458          expect(lastLog.get('message')).to.eq('25, 0, {duration: 1}')459        })460      })461      it('logs easing options', () => {462        cy.get('#scroll-to-both').scrollTo(25, { easing: 'linear' }).then(function () {463          const { lastLog } = this464          expect(lastLog.get('message')).to.eq('25, 0, {easing: linear}')465        })466      })467      it('snapshots immediately', () => {468        cy.get('#scroll-to-both').scrollTo(25, { duration: 1 }).then(function () {469          const { lastLog } = this470          expect(lastLog.get('snapshots').length).to.eq(1)471          expect(lastLog.get('snapshots')[0]).to.be.an('object')472        })473      })474      it('#consoleProps', () => {475        cy.get('#scroll-to-both').scrollTo(25, { duration: 1 }).then(function ($container) {476          const console = this.lastLog.invoke('consoleProps')477          expect(console.Command).to.eq('scrollTo')478          expect(console.X).to.eq(25)479          expect(console.Y).to.eq(0)480          expect(console.Options).to.eq('{duration: 1}')481          expect(console['Scrolled Element']).to.eq($container.get(0))482        })483      })484    })485  })486  context('#scrollIntoView', () => {487    beforeEach(function () {488      this.win = cy.state('window')489      this.scrollVert = cy.$$('#scroll-into-view-vertical')490      this.scrollHoriz = cy.$$('#scroll-into-view-horizontal')491      this.scrollBoth = cy.$$('#scroll-into-view-both')492      // reset the scrollable containers back493      // to furthest left and top494      this.win.scrollTo(0, 0)495      this.scrollVert.scrollTop(0)496      this.scrollVert.scrollLeft(0)497      this.scrollHoriz.scrollTop(0)498      this.scrollHoriz.scrollLeft(0)499      this.scrollBoth.scrollTop(0)500      this.scrollBoth.scrollLeft(0)501    })502    it('does not change the subject', () => {503      const div = cy.$$('#scroll-into-view-vertical div')504      cy.get('#scroll-into-view-vertical div').scrollIntoView().then(($div) => {505        expect($div).to.match(div)506      })507    })508    it('scrolls x axis of window to element', function () {509      expect(this.win.scrollY).to.eq(0)510      expect(this.win.scrollX).to.eq(0)511      cy.get('#scroll-into-view-win-horizontal div').scrollIntoView()512      cy.window().then((win) => {513        expect(win.scrollY).to.eq(0)514        expect(win.scrollX).not.to.eq(0)515      })516    })517    it('scrolls y axis of window to element', function () {518      expect(this.win.scrollY).to.eq(0)519      expect(this.win.scrollX).to.eq(0)520      cy.get('#scroll-into-view-win-vertical div').scrollIntoView()521      cy.window().then((win) => {522        expect(win.pageYOffset).not.to.eq(0)523        expect(Math.floor(win.pageXOffset)).closeTo(200, 2)524      })525    })526    it('scrolls both axes of window to element', function () {527      expect(this.win.scrollY).to.eq(0)528      expect(this.win.scrollX).to.eq(0)529      cy.get('#scroll-into-view-win-both div').scrollIntoView()530      cy.window().then((win) => {531        expect(win.scrollY).not.to.eq(0)532        expect(win.scrollX).not.to.eq(0)533      })534    })535    it('scrolls x axis of container to element', function () {536      expect(this.scrollHoriz.get(0).scrollTop).to.eq(0)537      expect(this.scrollHoriz.get(0).scrollLeft).to.eq(0)538      cy.get('#scroll-into-view-horizontal h5').scrollIntoView().then(function () {539        expect(this.scrollHoriz.get(0).scrollTop).to.eq(0)540        expect(this.scrollHoriz.get(0).scrollLeft).to.eq(300)541      })542    })543    it('scrolls y axis of container to element', function () {544      expect(this.scrollVert.get(0).scrollTop).to.eq(0)545      expect(this.scrollVert.get(0).scrollLeft).to.eq(0)546      cy.get('#scroll-into-view-vertical h5').scrollIntoView().then(function () {547        expect(this.scrollVert.get(0).scrollTop).to.eq(300)548        expect(this.scrollVert.get(0).scrollLeft).to.eq(0)549      })550    })551    it('scrolls both axes of container to element', function () {552      expect(this.scrollBoth.get(0).scrollTop).to.eq(0)553      expect(this.scrollBoth.get(0).scrollLeft).to.eq(0)554      cy.get('#scroll-into-view-both h5').scrollIntoView().then(function () {555        expect(this.scrollBoth.get(0).scrollTop).to.eq(300)556        expect(this.scrollBoth.get(0).scrollLeft).to.eq(300)557      })558    })559    it('calls jQuery scroll to', () => {560      const scrollTo = cy.spy($.fn, 'scrollTo')561      cy.get('#scroll-into-view-both h5').scrollIntoView().then(() => {562        expect(scrollTo).to.be.called563      })564    })565    it('sets duration to 0 by default', () => {566      const scrollTo = cy.spy($.fn, 'scrollTo')567      cy.get('#scroll-into-view-both h5').scrollIntoView().then(() => {568        expect(scrollTo).to.be.calledWithMatch({}, { duration: 0 })569      })570    })571    it('sets axis to correct x or y', () => {572      const scrollTo = cy.spy($.fn, 'scrollTo')573      cy.get('#scroll-into-view-both h5').scrollIntoView().then(() => {574        expect(scrollTo).to.be.calledWithMatch({}, { axis: 'xy' })575      })576    })577    it('scrolling resolves after a set duration', function () {578      expect(this.scrollBoth.get(0).scrollTop).to.eq(0)579      expect(this.scrollBoth.get(0).scrollLeft).to.eq(0)580      const scrollTo = cy.spy($.fn, 'scrollTo')581      cy.get('#scroll-into-view-both h5').scrollIntoView({ duration: 500 }).then(function () {582        expect(scrollTo).to.be.calledWithMatch({}, { duration: 500 })583        expect(this.scrollBoth.get(0).scrollLeft).to.eq(300)584        expect(this.scrollBoth.get(0).scrollTop).to.eq(300)585      })586    })587    it('accepts duration string option', () => {588      const scrollTo = cy.spy($.fn, 'scrollTo')589      cy.get('#scroll-into-view-both h5').scrollIntoView({ duration: '500' }).then(() => {590        expect(scrollTo.args[0][1].duration).to.eq('500')591      })592    })593    it('accepts offset string option', () => {594      const scrollTo = cy.spy($.fn, 'scrollTo')595      cy.get('#scroll-into-view-both h5').scrollIntoView({ offset: 500 }).then(() => {596        expect(scrollTo.args[0][1].offset).to.eq(500)597      })598    })599    it('accepts offset object option', () => {600      const scrollTo = cy.spy($.fn, 'scrollTo')601      cy.get('#scroll-into-view-both h5').scrollIntoView({ offset: { left: 500, top: 200 } }).then(() => {602        expect(scrollTo.args[0][1].offset).to.deep.eq({ left: 500, top: 200 })603      })604    })605    it('has easing set to swing by default', () => {606      const scrollTo = cy.spy($.fn, 'scrollTo')607      cy.get('#scroll-into-view-both h5').scrollIntoView().then(() => {608        expect(scrollTo.args[0][1].easing).to.eq('swing')609      })610    })611    it('scrolling resolves after easing', function () {612      expect(this.scrollBoth.get(0).scrollTop).to.eq(0)613      expect(this.scrollBoth.get(0).scrollLeft).to.eq(0)614      const scrollTo = cy.spy($.fn, 'scrollTo')615      cy.get('#scroll-into-view-both h5').scrollIntoView({ easing: 'linear' }).then(function () {616        expect(scrollTo).to.be.calledWithMatch({}, { easing: 'linear' })617        expect(this.scrollBoth.get(0).scrollTop).to.eq(300)618        expect(this.scrollBoth.get(0).scrollLeft).to.eq(300)619      })620    })621    describe('shadow dom', () => {622      beforeEach(() => {623        cy.visit('/fixtures/shadow-dom.html')624      })625      // https://github.com/cypress-io/cypress/issues/7986626      it('does not hang', () => {627        cy.get('.shadow-1', { includeShadowDom: true }).scrollIntoView()628      })629    })630    describe('assertion verification', () => {631      beforeEach(function () {632        cy.on('log:added', (attrs, log) => {633          if (log.get('name') === 'assert') {634            this.lastLog = log635          }636        })637        return null638      })639      it('eventually passes the assertion', () => {640        cy.on('command:retry', _.after(2, () => {641          cy.$$('#scroll-into-view-win-vertical div').addClass('scrolled')642        }))643        cy644        .contains('scroll into view vertical')645        .scrollIntoView()646        .should('have.class', 'scrolled').then(function () {647          const { lastLog } = this648          expect(lastLog.get('name')).to.eq('assert')649          expect(lastLog.get('state')).to.eq('passed')650          expect(lastLog.get('ended')).to.be.true651        })652      })653    })654    describe('errors', {655      defaultCommandTimeout: 50,656    }, () => {657      beforeEach(function () {658        this.logs = []659        cy.on('log:added', (attrs, log) => {660          this.lastLog = log661          return this.logs.push(log)662        })663        return null664      })665      context('subject errors', () => {666        it('throws when not passed DOM element as subject', (done) => {667          cy.on('fail', (err) => {668            expect(err.message).to.include('`cy.scrollIntoView()` failed because it requires a DOM element.')669            expect(err.message).to.include('{foo: bar}')670            expect(err.message).to.include('> `cy.noop()`')671            done()672          })673          cy.noop({ foo: 'bar' }).scrollIntoView()674        })675        it('throws when passed window object as subject', (done) => {676          cy.on('fail', (err) => {677            expect(err.message).to.include('`cy.scrollIntoView()` failed because it requires a DOM element.')678            expect(err.message).to.include('<window>')679            expect(err.message).to.include('> `cy.window()`')680            done()681          })682          cy.window().scrollIntoView()683        })684        it('throws when passed document object as subject', (done) => {685          cy.on('fail', (err) => {686            expect(err.message).to.include('`cy.scrollIntoView()` failed because it requires a DOM element.')687            expect(err.message).to.include('<document>')688            expect(err.message).to.include('> `cy.document()`')689            done()690          })691          cy.document().scrollIntoView()692        })693        it('throws if scrollable container is multiple elements', (done) => {694          cy.on('fail', (err) => {695            expect(err.message).to.include('`cy.scrollIntoView()` can only be used to scroll to 1 element, you tried to scroll to 2 elements.')696            expect(err.docsUrl).to.include('https://on.cypress.io/scrollintoview')697            done()698          })699          cy.get('button').scrollIntoView()700        })701      })702      context('argument errors', () => {703        it('throws if arg passed as non-object', (done) => {704          cy.on('fail', (err) => {705            expect(err.message).to.include('`cy.scrollIntoView()` can only be called with an `options` object. Your argument was: `foo`')706            expect(err.docsUrl).to.eq('https://on.cypress.io/scrollintoview')707            done()708          })709          cy.get('#scroll-into-view-both h5').scrollIntoView('foo')710        })711      })712      context('option errors', () => {713        it('throws if duration is not a number or valid string', (done) => {714          cy.on('fail', (err) => {715            expect(err.message).to.include('`cy.scrollIntoView()` must be called with a valid `duration`. Duration may be either a number (ms) or a string representing a number (ms). Your duration was: `foo`')716            expect(err.docsUrl).to.include('https://on.cypress.io/scrollintoview')717            done()718          })719          cy.get('#scroll-into-view-both h5').scrollIntoView({ duration: 'foo' })720        })721        it('throws if unrecognized easing', (done) => {722          cy.on('fail', (err) => {723            expect(err.message).to.include('`cy.scrollIntoView()` must be called with a valid `easing`. Your easing was: `flower`')724            expect(err.docsUrl).to.include('https://on.cypress.io/scrollintoview')725            done()726          })727          cy.get('#scroll-into-view-both h5').scrollIntoView({ easing: 'flower' })728        })729      })730    })731    describe('.log', () => {732      beforeEach(function () {733        this.logs = []734        cy.on('log:added', (attrs, log) => {735          this.lastLog = log736          return this.logs.push(log)737        })738        return null739      })740      it('logs out scrollIntoView', () => {741        cy.get('#scroll-into-view-both h5').scrollIntoView().then(function () {742          const { lastLog } = this743          expect(lastLog.get('name')).to.eq('scrollIntoView')744        })745      })746      it('passes in $el', () => {747        cy.get('#scroll-into-view-both h5').scrollIntoView().then(function ($container) {748          const { lastLog } = this749          expect(lastLog.get('$el').get(0)).to.eq($container.get(0))750        })751      })752      it('logs duration options', () => {753        cy.get('#scroll-into-view-both h5').scrollIntoView({ duration: '1' }).then(function () {754          const { lastLog } = this755          expect(lastLog.get('message')).to.eq('{duration: 1}')756        })757      })758      it('logs easing options', () => {759        cy.get('#scroll-into-view-both h5').scrollIntoView({ easing: 'linear' }).then(function () {760          const { lastLog } = this761          expect(lastLog.get('message')).to.eq('{easing: linear}')762        })763      })764      it('logs offset options', () => {765        cy.get('#scroll-into-view-both h5').scrollIntoView({ offset: { left: 500, top: 200 } }).then(function () {766          const { lastLog } = this767          expect(lastLog.get('message')).to.eq('{offset: {left: 500, top: 200}}')768        })769      })770      it('snapshots immediately', () => {771        cy.get('#scroll-into-view-both h5').scrollIntoView().then(function () {772          const { lastLog } = this773          expect(lastLog.get('snapshots').length).to.eq(1)774          expect(lastLog.get('snapshots')[0]).to.be.an('object')775        })776      })777      it('#consoleProps', () => {778        cy.get('#scroll-into-view-both h5').scrollIntoView().then(function ($container) {779          const console = this.lastLog.invoke('consoleProps')780          expect(console.Command).to.eq('scrollIntoView')781          expect(console['Applied To']).to.eq($container.get(0))782          expect(console['Scrolled Element']).to.exist783        })784      })785    })786  })...

1function checkAccess(hash){2	var url = '/Kilometer/CheckAccess/';3	jQuery.ajax({4		type: "POST",5		url: url,6		data: { km: hash },7		dataType: "json",8		success: function (data) {9			if(!data)10				window.location.href = '/Account/Login';11		}12	});13}14$(document).ready(function(){15	if($.browser.msie && $.browser.version == 8) {16	    //$('#ie-info').text('You are using IE8 in version '+ document.documentMode +' compatible mode.');17	}18	19	//var base_url_1 = 'http://www.d16878353.u238.foretag.surftown.se';20	//var base_url_2 = 'http://www.d16878353.u238.foretag.surftown.se/';21	//var base_url_3 = 'http://d16878353.u238.foretag.surftown.se';22	var base_url_4 = 'http://www.megaronmba.com';23	var pathname = window.location;24	$.historyInit(function (hash) {25		26		//checkAccess(hash)27		28		if(hash) {29		30			if (hash == 'intro') {31				$('.menu-item').removeClass('mark');32				$('#sec_intro').addClass('mark');33				$.scrollTo('#modul_intro', 400, {easing:'easeInOutQuart', offset: -20, axis: 'x', onAfter:function(){ 34				// After the scroll35				36				}37				});38			}39			else if (hash == 'pre') {40				$('.menu-item').removeClass('mark');41				$('#sec_pre').addClass('mark');42				$.scrollTo('#modul_pre', 400, {easing:'easeInOutQuart', offset: 0, axis: 'x', onAfter:function(){ 43				// After the scroll44				45				}46				});47			}48			else if (hash == '-05') {49				$('.menu-item').removeClass('mark');50				$('#sec_-05').addClass('mark');51				$.scrollTo('#modul_-05', 400, {easing:'easeInOutQuart', offset: 0, axis: 'x', onAfter:function(){ 52				// After the scroll53				54				}55				});56			}57			else if (hash == '-04') {58				$('.menu-item').removeClass('mark');59				$('#sec_-04').addClass('mark');60				$.scrollTo('#modul_-04', 400, {easing:'easeInOutQuart', offset: 0, axis: 'x', onAfter:function(){ 61				// After the scroll62				63				}64				});65			}66			else if (hash == '-03') {67				$('.menu-item').removeClass('mark');68				$('#sec_-03').addClass('mark');69				$.scrollTo('#modul_-03', 400, {easing:'easeInOutQuart', offset: 0, axis: 'x', onAfter:function(){ 70				// After the scroll71				72				}73				});74			}75			else if (hash == '-02') {76				$('.menu-item').removeClass('mark');77				$('#sec_-02').addClass('mark');78				$.scrollTo('#modul_-02', 400, {easing:'easeInOutQuart', offset: 0, axis: 'x', onAfter:function(){ 79				// After the scroll80				81				}82				});83			}84			else if (hash == '-01') {85				$('.menu-item').removeClass('mark');86				$('#sec_-01').addClass('mark');87				$.scrollTo('#modul_-01', 400, {easing:'easeInOutQuart', offset: 0, axis: 'x', onAfter:function(){ 88				// After the scroll89				90				}91				});92			}93			else if (hash == 'zero') {94				$('.menu-item').removeClass('mark');95				$('#sec_zero').addClass('mark');96				$.scrollTo('#modul_zero', 400, {easing:'easeInOutQuart', offset: 0, axis: 'x', onAfter:function(){ 97				// After the scroll98				99				}100				});101			}102			else if (hash == '01') {103				$('.menu-item').removeClass('mark');104				$('#sec_01').addClass('mark');105				$.scrollTo('#modul_01', 400, {easing:'easeInOutQuart', offset: 0, axis: 'x', onAfter:function(){ 106				// After the scroll107				108				}109				});110			}111			else if (hash == '02') {112				$('.menu-item').removeClass('mark');113				$('#sec_02').addClass('mark');114				$.scrollTo('#modul_2', 400, {easing:'easeInOutQuart', offset: 0, axis: 'x', onAfter:function(){ 115				// After the scroll116				117				}118				});119			}120			121			else if (hash == '03') {122				$('.menu-item').removeClass('mark');123				$('#sec_03').addClass('mark');124				$.scrollTo('#modul_3', 400, {easing:'easeInOutQuart', offset: 0, axis: 'x', onAfter:function(){ 125				// After the scroll126				127				}128				});129			}130			131			else if (hash == '04') {132				$('.menu-item').removeClass('mark');133				$('#sec_04').addClass('mark');134				$.scrollTo('#modul_4', 400, {easing:'easeInOutQuart', offset: 0, axis: 'x', onAfter:function(){ 135				// After the scroll136				137				}138				});139			}140			141			else if (hash == '05') {142				$('.menu-item').removeClass('mark');143				$('#sec_05').addClass('mark');144				$.scrollTo('#modul_5', 400, {easing:'easeInOutQuart', offset: 0, axis: 'x', onAfter:function(){ 145				// After the scroll146				147				}148				});149			}150			151			else if (hash == '06') {152				$('.menu-item').removeClass('mark');153				$('#sec_06').addClass('mark');154				$.scrollTo('#modul_6', 400, {easing:'easeInOutQuart', offset: 0, axis: 'x', onAfter:function(){ 155				// After the scroll156				157				}158				});159			}160			161			else if (hash == '07') {162				$('.menu-item').removeClass('mark');163				$('#sec_07').addClass('mark');164				$.scrollTo('#modul_7', 400, {easing:'easeInOutQuart', offset: 0, axis: 'x', onAfter:function(){ 165				// After the scroll166				167				}168				});169			}170			171			else if (hash == '08') {172				$('.menu-item').removeClass('mark');173				$('#sec_08').addClass('mark');174				$.scrollTo('#modul_8', 400, {easing:'easeInOutQuart', offset: 0, axis: 'x', onAfter:function(){ 175				// After the scroll176				177				}178				});179			}180			else if (hash == '09') {181				$('.menu-item').removeClass('mark');182				$('#sec_09').addClass('mark');183				$.scrollTo('#modul_9', 400, {easing:'easeInOutQuart', offset: 0, axis: 'x', onAfter:function(){ 184				// After the scroll185				186				}187				});188			}189			else if (hash == '10') {190				$('.menu-item').removeClass('mark');191				$('#sec_10').addClass('mark');192				$.scrollTo('#modul_10', 400, {easing:'easeInOutQuart', offset: 0, axis: 'x', onAfter:function(){ 193				// After the scroll194				195				}196				});197			}198			else if (hash == '11') {199				$('.menu-item').removeClass('mark');200				$('#sec_11').addClass('mark');201				$.scrollTo('#modul_11', 400, {easing:'easeInOutQuart', offset: 0, axis: 'x', onAfter:function(){ 202				// After the scroll203				204				}205				});206			}207			208			else if (hash == '12') {209				$('.menu-item').removeClass('mark');210				$('#sec_12').addClass('mark');211				$.scrollTo('#modul_12', 400, {easing:'easeInOutQuart', offset: 0, axis: 'x', onAfter:function(){ 212				// After the scroll213				214				}215				});216			}217			else if (hash == '13') {218				$('.menu-item').removeClass('mark');219				$('#sec_13').addClass('mark');220				$.scrollTo('#modul_13', 400, {easing:'easeInOutQuart', offset: 0, axis: 'x', onAfter:function(){ 221				// After the scroll222				223				}224				});225			}226			else if (hash == '14') {227				$('.menu-item').removeClass('mark');228				$('#sec_14').addClass('mark');229				$.scrollTo('#modul_14', 400, {easing:'easeInOutQuart', offset: 0, axis: 'x', onAfter:function(){ 230				// After the scroll231				232				}233				});234			}235			else if (hash == '15') {236				$('.menu-item').removeClass('mark');237				$('#sec_15').addClass('mark');238				$.scrollTo('#modul_15', 400, {easing:'easeInOutQuart', offset: 0, axis: 'x', onAfter:function(){ 239				// After the scroll240				241				}242				});243			}244			else if (hash == '16') {245				$('.menu-item').removeClass('mark');246				$('#sec_16').addClass('mark');247				$.scrollTo('#modul_16', 400, {easing:'easeInOutQuart', offset: 0, axis: 'x', onAfter:function(){ 248				// After the scroll249				250				}251				});252			}253			254			else if (hash == '17') {255				$('.menu-item').removeClass('mark');256				$('#sec_17').addClass('mark');257				$.scrollTo('#modul_17', 400, {easing:'easeInOutQuart', offset: 0, axis: 'x', onAfter:function(){ 258				// After the scroll259				260				}261				});262			}			263			264			else if (hash == '18') {265				$('.menu-item').removeClass('mark');266				$('#sec_18').addClass('mark');267				$.scrollTo('#modul_18', 400, {easing:'easeInOutQuart', offset: 0, axis: 'x', onAfter:function(){ 268				// After the scroll269				270				}271				});272			}	273			274			else if (hash == '19') {275				$('.menu-item').removeClass('mark');276				$('#sec_19').addClass('mark');277				$.scrollTo('#modul_19', 400, {easing:'easeInOutQuart', offset: 0, axis: 'x', onAfter:function(){ 278				// After the scroll279				280				}281				});282			}			283			284			else if (hash == '20') {285				$('.menu-item').removeClass('mark');286				$('#sec_20').addClass('mark');287				$.scrollTo('#modul_20', 400, {easing:'easeInOutQuart', offset: 0, axis: 'x', onAfter:function(){ 288				// After the scroll289				290				}291				});292			}293			else if (hash == '21') {294				$('.menu-item').removeClass('mark');295				$('#sec_21').addClass('mark');296				$.scrollTo('#modul_21', 400, {easing:'easeInOutQuart', offset: 0, axis: 'x', onAfter:function(){ 297				// After the scroll298				299				}300				});301			}302			else if (hash == '22') {303				$('.menu-item').removeClass('mark');304				$('#sec_22').addClass('mark');305				$.scrollTo('#modul_22', 400, {easing:'easeInOutQuart', offset: 0, axis: 'x', onAfter:function(){ 306				// After the scroll307				308				}309				});310			}311			else if (hash == '23') {312				$('.menu-item').removeClass('mark');313				$('#sec_23').addClass('mark');314				$.scrollTo('#modul_23', 400, {easing:'easeInOutQuart', offset: 0, axis: 'x', onAfter:function(){ 315				// After the scroll316				317				}318				});319			}320			else if (hash == '24') {321				$('.menu-item').removeClass('mark');322				$('#sec_24').addClass('mark');323				$.scrollTo('#modul_24', 400, {easing:'easeInOutQuart', offset: 0, axis: 'x', onAfter:function(){ 324				// After the scroll325				326				}327				});328			}329			else if (hash == '25') {330				$('.menu-item').removeClass('mark');331				$('#sec_25').addClass('mark');332				$.scrollTo('#modul_25', 400, {easing:'easeInOutQuart', offset: 0, axis: 'x', onAfter:function(){ 333				// After the scroll334				335				}336				});337			}338			else if (hash == '26') {339				$('.menu-item').removeClass('mark');340				$('#sec_26').addClass('mark');341				$.scrollTo('#modul_26', 400, {easing:'easeInOutQuart', offset: 0, axis: 'x', onAfter:function(){ 342				// After the scroll343				344				}345				});346			}347			else if (hash == '27') {348				$('.menu-item').removeClass('mark');349				$('#sec_27').addClass('mark');350				$.scrollTo('#modul_27', 400, {easing:'easeInOutQuart', offset: 0, axis: 'x', onAfter:function(){ 351				// After the scroll352				353				}354				});355			}356			else if (hash == '28') {357				$('.menu-item').removeClass('mark');358				$('#sec_28').addClass('mark');359				$.scrollTo('#modul_28', 400, {easing:'easeInOutQuart', offset: 0, axis: 'x', onAfter:function(){ 360				// After the scroll361				362				}363				});364			}365			else if (hash == '29') {366				$('.menu-item').removeClass('mark');367				$('#sec_29').addClass('mark');368				$.scrollTo('#modul_29', 400, {easing:'easeInOutQuart', offset: 0, axis: 'x', onAfter:function(){ 369				// After the scroll370				371				}372				});373			}374			else if (hash == '30') {375				$('.menu-item').removeClass('mark');376				$('#sec_30').addClass('mark');377				$.scrollTo('#modul_30', 400, {easing:'easeInOutQuart', offset: 0, axis: 'x', onAfter:function(){ 378				// After the scroll379				380				}381				});382			}383			else if (hash == '31') {384				$('.menu-item').removeClass('mark');385				$('#sec_31').addClass('mark');386				$.scrollTo('#modul_31', 400, {easing:'easeInOutQuart', offset: 0, axis: 'x', onAfter:function(){ 387				// After the scroll388				389				}390				});391			}392			else if (hash == '32') {393				$('.menu-item').removeClass('mark');394				$('#sec_32').addClass('mark');395				$.scrollTo('#modul_32', 400, {easing:'easeInOutQuart', offset: 0, axis: 'x', onAfter:function(){ 396				// After the scroll397				398				}399				});400			}401			else if (hash == '33') {402				$('.menu-item').removeClass('mark');403				$('#sec_33').addClass('mark');404				$.scrollTo('#modul_33', 400, {easing:'easeInOutQuart', offset: 0, axis: 'x', onAfter:function(){ 405				// After the scroll406				407				}408				});409			}410			else if (hash == '34') {411				$('.menu-item').removeClass('mark');412				$('#sec_34').addClass('mark');413				$.scrollTo('#modul_34', 400, {easing:'easeInOutQuart', offset: 0, axis: 'x', onAfter:function(){ 414				// After the scroll415				416				}417				});418			}419			else if (hash == '35') {420				$('.menu-item').removeClass('mark');421				$('#sec_35').addClass('mark');422				$.scrollTo('#modul_35', 400, {easing:'easeInOutQuart', offset: 0, axis: 'x', onAfter:function(){ 423				// After the scroll424				425				}426				});427			}428			else if (hash == '36') {429				$('.menu-item').removeClass('mark');430				$('#sec_36').addClass('mark');431				$.scrollTo('#modul_36', 400, {easing:'easeInOutQuart', offset: 0, axis: 'x', onAfter:function(){ 432				// After the scroll433				434				}435				});436			}437			else if (hash == '37') {438				$('.menu-item').removeClass('mark');439				$('#sec_37').addClass('mark');440				$.scrollTo('#modul_37', 400, {easing:'easeInOutQuart', offset: 0, axis: 'x', onAfter:function(){ 441				// After the scroll442				443				}444				});445			}446			else if (hash == '38') {447				$('.menu-item').removeClass('mark');448				$('#sec_38').addClass('mark');449				$.scrollTo('#modul_38', 400, {easing:'easeInOutQuart', offset: 0, axis: 'x', onAfter:function(){ 450				// After the scroll451				452				}453				});454			}455			else if (hash == '39') {456				$('.menu-item').removeClass('mark');457				$('#sec_39').addClass('mark');458				$.scrollTo('#modul_39', 400, {easing:'easeInOutQuart', offset: 0, axis: 'x', onAfter:function(){ 459				// After the scroll460				461				}462				});463			}464			else if (hash == '40') {465				$('.menu-item').removeClass('mark');466				$('#sec_40').addClass('mark');467				$.scrollTo('#modul_40', 400, {easing:'easeInOutQuart', offset: 0, axis: 'x', onAfter:function(){ 468				// After the scroll469				470				}471				});472			}473			else if (hash == '41') {474				$('.menu-item').removeClass('mark');475				$('#sec_41').addClass('mark');476				$.scrollTo('#modul_41', 400, {easing:'easeInOutQuart', offset: 0, axis: 'x', onAfter:function(){ 477				// After the scroll478				479				}480				});481			}482			else if (hash == '42') {483				$('.menu-item').removeClass('mark');484				$('#sec_42').addClass('mark');485				$.scrollTo('#modul_42', 400, {easing:'easeInOutQuart', offset: 0, axis: 'x', onAfter:function(){ 486				// After the scroll487				488				}489				});490			}491			else if (hash == 'start') {492			}493						494			else {495				//alert('Denna sidan finns ej');496			}497 			498		    499		} else {500				//alert('Disch');			501		}502	});503	504	if (pathname == base_url_4) {505				//alert('First Page');506	} else {}507	508	$("#menu a, a.radiotrigger").live("click", function(){509		var hash = this.href;510		hash = hash.replace(/^.*#/, '');511		$.historyLoad(hash);512		return false;513	});514	...

1var iscroll = new IScroll('.explain-component', {2	mouseWheel: true,3	scrollbars: true,4});5function linkage() {6	setTimeout(function() {7		$('.blocklyDraggable').on('mousedown', function() {8			clearTimeout(timeout);9			var timeout;10			$('li').children().css('background-color', '#eeeeee')11			if(this.className.animVal.indexOf('blocklySelected') > 0) {12				for(var i = 0,length =  this.childNodes.length; i < length; i++) {13					if(this.childNodes[i].className.baseVal.indexOf('cover') > 0) {14						scrollTo('yaokq');15					} else if(this.childNodes[i].className.baseVal.indexOf('left_turn') > 0) {16						scrollTo('turnleft');17					} else if(this.childNodes[i].className.baseVal.indexOf('right_turn') > 0) {18						scrollTo('turnright');19					} else if(this.childNodes[i].className.baseVal.indexOf('go_forward') > 0) {20						scrollTo('goahead');21					} else if(this.childNodes[i].className.baseVal.indexOf('go_reverse') > 0) {22						scrollTo('goback');23					} else if(this.childNodes[i].className.baseVal.indexOf('stop') > 0) {24						scrollTo('stop');25					} else if(this.childNodes[i].className.baseVal.indexOf('catHandle') > 0) {26						scrollTo('catwave');27					} else if(this.childNodes[i].className.baseVal.indexOf('catSound') > 0) {28						scrollTo('catSound ');29					}  else if(this.childNodes[i].className.baseVal.indexOf('firstBtn') > 0) {30						scrollTo('firstBtn '); 31					}else if(this.childNodes[i].className.baseVal.indexOf('secondBtn') > 0) {32						scrollTo('secondBtn ');33					}else if(this.childNodes[i].className.baseVal.indexOf('backBtn') > 0) {34						scrollTo('backBtn ');35					}else if(this.childNodes[i].className.baseVal.indexOf('hammerKnock') > 0) {36						scrollTo('hammerKnock ');37					}else if(this.childNodes[i].className.baseVal.indexOf('numberLives') > 0) {38						scrollTo('numberLives ');39					}else if(this.childNodes[i].className.baseVal.indexOf('scanningGoForward') > 0) {40						scrollTo('scanningGoForward');41					}else if(this.childNodes[i].className.baseVal.indexOf('obstacleGoBack') > 0) {42						scrollTo('obstacleGoBack ');43					}else if(this.childNodes[i].className.baseVal.indexOf('presShake') > 0) {44						scrollTo('presShake');45					}else if(this.childNodes[i].className.baseVal.indexOf('pursuit') > 0) {46						scrollTo('pursuit1');47					}else if(this.childNodes[i].className.baseVal.indexOf('Score') > 0) {48						scrollTo('Score');49					}else if(this.childNodes[i].className.baseVal.indexOf('basketSpeed') > 0) {50						scrollTo('basketSpeed');51					}else if(this.childNodes[i].className.baseVal.indexOf('control_Button_if') > 0) {52						scrollTo('control_Button_if');53					}else if(this.childNodes[i].className.baseVal.indexOf('control_IRsensor_if') > 0) {54						scrollTo('control_IRsensor_if');55					}else if(this.childNodes[i].className.baseVal.indexOf('play_note') > 0) {56						scrollTo('play_note');57					}else if(this.childNodes[i].className.baseVal.indexOf('play_song') > 0) {58						scrollTo('play_song');59					}else if(this.childNodes[i].className.baseVal.indexOf('policeLight') > 0) {60						scrollTo('policeLight');61					}else if(this.childNodes[i].className.baseVal.indexOf('greenLED') > 0) {62						scrollTo('greenLED');63					}else if(this.childNodes[i].className.baseVal.indexOf('redLED') > 0) {64						scrollTo('redLED');65					}else if(this.childNodes[i].className.baseVal.indexOf('blueLED') > 0) {66						scrollTo('blueLED');67					}else if(this.childNodes[i].className.baseVal.indexOf('yellowLED') > 0) {68						scrollTo('yellowLED');69					}else if(this.childNodes[i].className.baseVal.indexOf('offLED') > 0) {70						scrollTo('offLED');71					}else if(this.childNodes[i].className.baseVal.indexOf('leftturn_light_flash') > 0) {72						scrollTo('leftturn_light_flash');73					}else if(this.childNodes[i].className.baseVal.indexOf('leftturn_light_off') > 0) {74						scrollTo('leftturn_light_off');75					}else if(this.childNodes[i].className.baseVal.indexOf('leftturn_light_on') > 0) {76						scrollTo('leftturn_light_on');77					}else if(this.childNodes[i].className.baseVal.indexOf('rightturn_light_flash') > 0) {78						scrollTo('rightturn_light_flash');79					}else if(this.childNodes[i].className.baseVal.indexOf('rightturn_light_off') > 0) {80						scrollTo('rightturn_light_off');81					}else if(this.childNodes[i].className.baseVal.indexOf('rightturn_light_on') > 0) {82						scrollTo('rightturn_light_on');83					}else if(this.childNodes[i].className.baseVal.indexOf('rear_light_on') > 0) {84						scrollTo('rear_light_on');85					}else if(this.childNodes[i].className.baseVal.indexOf('rear_light_off') > 0) {86						scrollTo('rear_light_off');87					}88					89					90				}91			}92		})93	}, 500);94}95function scrollTo(a) {96	iscroll.scrollToElement('.' + a, 500, null, -50, IScroll.utils.ease.bounce);97	timeout = setTimeout(function() {98		$('.' + a).css('background-color', '#ffffff');99		$('.' + a + ' ul li').children().css('background-color', '#fff')100	}, 200);101	return false;102}103//setInterval(function (){104//	$('.blocklyText').each(function(){105//			if($(this).html() == '如果'||$(this).html() == '执行'||$(this).html() == '否则'||$(this).html() == '否则如果'||$(this).html() == '重复'){106//		$(this).css('fill','#514F50')107//	}108//	});...

1/**2 * @depends jquery3 * @name jquery.scrollto4 * @package jquery-scrollto {@link http://balupton.com/projects/jquery-scrollto}5 */6/**7 * jQuery Aliaser8 */9(function($){10	/**11	 * jQuery ScrollTo (balupton edition)12	 * @version 1.0.113	 * @date August 31, 201014	 * @since 0.1.0, August 27, 201015     * @package jquery-scrollto {@link http://balupton.com/projects/jquery-scrollto}16	 * @author Benjamin "balupton" Lupton {@link http://balupton.com}17	 * @copyright (c) 2010 Benjamin Arthur Lupton {@link http://balupton.com}18	 * @license MIT License {@link http://creativecommons.org/licenses/MIT/}19	 */20	if ( !($.ScrollTo||false) ) {21		$.ScrollTo = {22			/**23			 * The Default Configuration24			 */25			config: {26				duration: 400,27				easing: 'swing',28				callback: undefined,29				durationMode: 'each'30			},31			/**32			 * Configure ScrollTo33			 */34			configure: function(options){35				var ScrollTo = $.ScrollTo;36				// Apply Options to Config37				$.extend(ScrollTo.config, options||{});38				// Chain39				return this;40			},41			/**42			 * Perform the Scroll Animation for the Collections43			 * We use $inline here, so we can determine the actual offset start for each overflow:scroll item44			 * Each collection is for each overflow:scroll item45			 */46			scroll: function(collections, config){47				var ScrollTo = $.ScrollTo;48				// Determine the Scroll49	    		var	collection = collections.pop(),50					$container = collection.$container,51					$target = collection.$target;52				// Prepare the Inline Element of the Container53				var $inline = $('<span/>').css({54					'position': 'absolute',55					'top': '0px',56					'left': '0px'57				});58				var position = $container.css('position');59				// Insert the Inline Element of the Container60				$container.css('position','relative');61				$inline.appendTo($container);62				// Determine the Offsets63				var	startOffset = $inline.offset().top,64					targetOffset = $target.offset().top,65					offsetDifference = targetOffset - startOffset;66				// Reset the Inline Element of the Container67				$inline.remove();68				$container.css('position',position);69				// Prepare the callback70				var callback = function(event){71					// Check72					if ( collections.length === 0 ) {73						// Callback74						if ( typeof config.callback === 'function' ) {75							config.callback.apply(this,[event]);76						}77					}78					else {79						// Recurse80						ScrollTo.scroll(collections,config);81					}82					// Return true83					return true;84				};85				// Perform the Scroll86				$container.animate({87					'scrollTop': offsetDifference+'px'88				}, config.duration, config.easing, callback);89				// Return true90				return true;91			},92			/**93			 * ScrollTo the Element using the Options94			 */95			fn: function(options){96				var ScrollTo = $.ScrollTo;97				// Prepare98				var	$target = $(this);99				if ( $target.length === 0 ) {100					// Chain101					return this;102				}103				// Fetch104				var	$container = $target.parent(),105					collections = [];106				// Handle Options107				config = $.extend({},ScrollTo.config,options);108				// Cycle through the containers109				while ( $container.length === 1 && !$container.is('body') && !($container.get(0) === document) ) {110					// Check Container111					var container = $container.get(0);112					if ( $container.css('overflow-y') !== 'visible' && container.scrollHeight !== container.clientHeight ) {113						// Push the Collection114						collections.push({115							'$container': $container,116							'$target': $target117						});118						// Update the Target119						$target = $container;120					}121					// Update the Container122					$container = $container.parent();123				}124				// Add the final collection125				collections.push({126					'$container': $($.browser.msie ? 'html' : 'body'),127					'$target': $target128				});129				// Adjust the Config130				if ( config.durationMode === 'all' ) {131					config.duration /= collections.length;132				}133				// Handle134				ScrollTo.scroll(collections,config);135				// Chain136				return this;137			},138			/**139			 * Construct140			 */141			construct: function(options){142				var ScrollTo = $.ScrollTo;143				// Apply our jQuery Function144				$.fn.ScrollTo = ScrollTo.fn;145				// Apply our Options to the Default Config146				ScrollTo.config = $.extend(ScrollTo.config,options);147				// Chain148				return this;149			}150		};151		// Construct It152		$.ScrollTo.construct();153	}154	else {155		window.console.warn("$.ScrollTo has already been defined...");156	}...

1+ function ($) {2    'use strict';3    // SCROLLTO CLASS DEFINITION4    // ======================5    var scrto = '[data-toggle="scroll"][href*="#"]:not([href="#"])'6    var Scrollto = function (element, options) {7        this.element = '#' + $(element).attr('id')8        this.$element = $(element)9        this.options = $.extend({}, Scrollto.DEFAULTS, options)10        if (this.options.toggle) this.toggle();11    }12    Scrollto.VERSION = '0.3.0'13    Scrollto.TRANSITION_DURATION = 'slow'14    Scrollto.DEFAULTS = {15        toggle: true,16        target: '0'17    }18    Scrollto.prototype.toggle = function () {19        //if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {20            var target, hash21            if (this.$element !== undefined && this.element.indexOf('#') === 0) {22                target = $(this.element)23                hash = this.element24            } else {25                target = $(this.hash)26                hash = this.hash27                target = target.length ? target : $('[name=' + this.hash.slice(1) + ']')28            }29            30            if (target.length) {31                $('html, body').animate({32                    scrollTop: target.offset().top33                }, Scrollto.TRANSITION_DURATION, function () {34                    setTimeout(function () {35                        window.location.hash = hash36                    }, 50)37                })38                return false39            }40        //}41    }42    // SCROLLTO PLUGIN DEFINITION43    // =======================44    function Plugin(option) {45        return this.each(function () {46            var $this = $(this)47            var data = $this.data('bs.scrollto')48            var options = $.extend({}, Scrollto.DEFAULTS, $this.data(), typeof option === 'object' && option)49            if (!data) $this.data('bs.scrollto', (data = new Scrollto(this, options)))50            if (typeof option === 'string') data[option]()51        })52    }53    var old = $.fn.scrollto54    $.fn.scrollto = Plugin55    $.fn.scrollto.Constructor = Scrollto56    // SCROLLTO NO CONFLICT57    // =================58    $.fn.scrollto.noConflict = function () {59        $.fn.scrollto = old60        return this61    }62    // SCROLLTO DATA-API63    // ==============64    $(document).on('click', scrto, Scrollto.prototype.toggle)...

1describe('setting: offset', function() {2  context('global', () => {3    before(() => {4      cy.visit('/');5    });6    context('400px', () => {7      before(() => {8        cy.initAOS({9          offset: 40010        });11      });12      it('Should animate 3 items', function() {13        cy.get('.aos-animate').should('have.length', 3);14      });15      it('Should animate next 3 items on scroll', function() {16        cy.scrollTo(0, 50);17        cy.get('.aos-animate').should('have.length', 6);18      });19    });20    context('0px', () => {21      before(() => {22        cy.initAOS({23          offset: 024        });25      });26      it('Should animate 9 items', function() {27        cy.get('.aos-animate').should('have.length', 9);28        cy.scrollTo(0, 50);29        cy.get('.aos-animate').should('have.length', 9);30      });31    });32  });33  context('inline', () => {34    before(() => {35      cy.visit('/offset.html');36      cy.initAOS();37      cy.viewport(1280, 500);38    });39    it('Should properly tigger all animations', function() {40      cy.get('.aos-animate').should('have.length', 7);41      cy.scrollTo(0, 1 * 150);42      cy.get('.aos-animate').should('have.length', 8);43      cy.scrollTo(0, 2 * 150);44      cy.get('.aos-animate').should('have.length', 10);45      cy.scrollTo(0, 3 * 150);46      cy.get('.aos-animate').should('have.length', 11);47      cy.scrollTo(0, 4 * 150);48      cy.get('.aos-animate').should('have.length', 13);49      cy.scrollTo(0, 5 * 150);50      cy.get('.aos-animate').should('have.length', 14);51      cy.scrollTo(0, 6 * 150);52      cy.get('.aos-animate').should('have.length', 16);53      cy.scrollTo(0, 7 * 150);54      cy.get('.aos-animate').should('have.length', 17);55      cy.scrollTo(0, 8 * 150);56      cy.get('.aos-animate').should('have.length', 19);57      cy.scrollTo(0, 9 * 150);58      cy.get('.aos-animate').should('have.length', 20);59      cy.scrollTo(0, 10 * 150);60      cy.get('.aos-animate').should('have.length', 22);61      cy.scrollTo(0, 11 * 150);62      cy.get('.aos-animate').should('have.length', 23);63      cy.scrollTo(0, 12 * 150);64      cy.get('.aos-animate').should('have.length', 25);65      cy.scrollTo(0, 13 * 150);66      cy.get('.aos-animate').should('have.length', 26);67      cy.scrollTo(0, 14 * 150);68      cy.get('.aos-animate').should('have.length', 27);69    });70  });...

1describe('My First Test', () => {2    it('Visit to Blacked Market Home Page', () => {3      cy.visit('http://localhost:3000')4    //   cy.get('.css-1ynkv7l').should('be.visible').contains('a').click()5    6    // cy.get('.css-1ynkv7l').should('be.visible').contains('cars we love').click()7    cy.scrollTo('bottom')8    cy.scrollTo('top')9    cy.pause()   10    cy.viewport('macbook-15')11    cy.scrollTo('bottom')12    cy.scrollTo('top')13    cy.pause()14    cy.viewport('macbook-13')15    cy.scrollTo('bottom')16    cy.scrollTo('top')17    cy.pause()18    cy.viewport('macbook-11')19    cy.scrollTo('bottom')20    cy.scrollTo('top')21    cy.pause()22    cy.viewport('ipad-2')23    cy.scrollTo('bottom')24    cy.scrollTo('top')25    cy.pause()26    cy.viewport('ipad-mini')27    cy.scrollTo('bottom')28    cy.scrollTo('top')29    cy.pause()30    cy.viewport('iphone-6+')31    cy.scrollTo('bottom')32    cy.scrollTo('top')33    cy.pause()34    cy.viewport('iphone-6')35    cy.scrollTo('bottom')36    cy.scrollTo('top')37    cy.pause()38    cy.viewport('iphone-5')39    cy.scrollTo('bottom')40    cy.scrollTo('top')41    cy.pause()42    cy.viewport('iphone-4')43    cy.scrollTo('bottom')44    cy.scrollTo('top')45    cy.pause()46    cy.viewport('iphone-3')47    cy.scrollTo('bottom')48    cy.scrollTo('top')49    cy.pause()50    cy.viewport('ipad-2', 'portrait')51    cy.scrollTo('bottom')52    cy.scrollTo('top')53    cy.pause()54    cy.viewport('iphone-4', 'landscape')55    cy.scrollTo('bottom')56    cy.scrollTo('top')57    cy.pause()58    })...

1jQuery(function ($) {2    //resetowanie scrolla3    $.scrollTo(0);4    $('#link1').click(function () { $.scrollTo($('#monitorykineskopowe'), 500); });5    $('#link2').click(function () { $.scrollTo($('#zasadakineskop'), 500); });6    $('#link3').click(function () { $.scrollTo($('#maskakineskop'), 500); });7    $('#link4').click(function () { $.scrollTo($('#wadyzaletykineskop'), 500); });8    $('#link5').click(function () { $.scrollTo($('#parametrykineskop'), 500); });9    $('#link6').click(function () { $.scrollTo($('#budowaLCD'), 500); });10    $('#link7').click(function () { $.scrollTo($('#zasadaLCD'), 500); });11    $('#link8').click(function () { $.scrollTo($('#matryceLCD'), 500); });12    $('#link9').click(function () { $.scrollTo($('#wadyzaletyLCD'), 500); });13    $('#link10').click(function () { $.scrollTo($('#parametryLCD'), 500); });14    $('#link11').click(function () { $.scrollTo($('#dsub'), 500); });15    $('#link12').click(function () { $.scrollTo($('#dvi'), 500); });16    $('#link13').click(function () { $.scrollTo($('#hdmi'), 500); });17    $('.scrollup').click(function () { $.scrollTo($('body'), 1000); });18}19);20//ukazanie przycisku21$(window).scroll(function () {22    if ($(this).scrollTop() > 300) $('.scrollup').fadeIn();23    else $('.scrollup').fadeOut();24}...