{"id":22239306,"url":"https://github.com/dyazincahya-blog/example-vertical-scroll-jquery","last_synced_at":"2026-05-19T09:10:22.034Z","repository":{"id":200451310,"uuid":"705536445","full_name":"dyazincahya-blog/example-vertical-scroll-jquery","owner":"dyazincahya-blog","description":"This is a sample code for make Vertical Scroll or Snapping Scroll on HTML Web using JQUERY","archived":false,"fork":false,"pushed_at":"2023-10-16T08:07:55.000Z","size":17,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-30T09:16:59.447Z","etag":null,"topics":["example-code","javascript","jquery","snapping-scroll","vertical-scroll"],"latest_commit_sha":null,"homepage":"https://k4ng.github.io/example-vertical-scroll-jquery/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dyazincahya-blog.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2023-10-16T07:54:29.000Z","updated_at":"2023-10-16T08:20:41.000Z","dependencies_parsed_at":null,"dependency_job_id":"ab24aa3c-4a9b-4b14-9eb0-b730c91f84bc","html_url":"https://github.com/dyazincahya-blog/example-vertical-scroll-jquery","commit_stats":null,"previous_names":["k4ng/vertical-scroll-jquery-example","dyazincahya-blog/example-vertical-scroll-jquery","k4ng/example-vertical-scroll-jquery"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dyazincahya-blog%2Fexample-vertical-scroll-jquery","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dyazincahya-blog%2Fexample-vertical-scroll-jquery/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dyazincahya-blog%2Fexample-vertical-scroll-jquery/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dyazincahya-blog%2Fexample-vertical-scroll-jquery/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dyazincahya-blog","download_url":"https://codeload.github.com/dyazincahya-blog/example-vertical-scroll-jquery/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245440583,"owners_count":20615633,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["example-code","javascript","jquery","snapping-scroll","vertical-scroll"],"created_at":"2024-12-03T03:18:51.611Z","updated_at":"2026-05-19T09:10:17.011Z","avatar_url":"https://github.com/dyazincahya-blog.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Example Vertical Scroll JQUERY\nThis is a sample code for make Vertical Scroll or Snapping Scroll on HTML Web using JQUERY. You can trigger vertical scroll using scrolling mouse or using arrow up and down on your keyboard\n\n### Demo\n[Click Here](https://k4ng.github.io/example-vertical-scroll-jquery)\n\n### Result\n![Result](https://raw.githubusercontent.com/k4ng/example-vertical-scroll-jquery/main/ScreenShotResult.png)\n\n\n### [script.js](https://github.com/k4ng/example-vertical-scroll-jquery/blob/main/script.js)\nIn this file, you can set animation duration scroll on variable **animationDuration**\n\n``` javascript\n$(document).ready(function () {\n  var sections = $(\"section\");\n  var currentSection = 0;\n  var animationDuration = 500; // Change this value to adjust the response speed\n\n  // Scroll to the next or previous section when the user scrolls with the mouse wheel\n  $(window).on(\"mousewheel DOMMouseScroll\", function (e) {\n    if (e.originalEvent.wheelDelta \u003e 0 || e.originalEvent.detail \u003c 0) {\n      currentSection = Math.max(currentSection - 1, 0);\n    } else {\n      currentSection = Math.min(currentSection + 1, sections.length - 1);\n    }\n    scrollToSection(currentSection);\n  });\n\n  // Handle arrow key navigation\n  $(document).keydown(function (e) {\n    if (e.keyCode === 38) {\n      // Up arrow key\n      currentSection = Math.max(currentSection - 1, 0);\n      scrollToSection(currentSection);\n    } else if (e.keyCode === 40) {\n      // Down arrow key\n      currentSection = Math.min(currentSection + 1, sections.length - 1);\n      scrollToSection(currentSection);\n    }\n  });\n\n  // Function to scroll to a specific section\n  function scrollToSection(index) {\n    var target = sections.eq(index);\n    $(\"html, body\").animate(\n      {\n        scrollTop: target.offset().top,\n      },\n      animationDuration\n    ); // Adjust the animation duration here\n  }\n});\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdyazincahya-blog%2Fexample-vertical-scroll-jquery","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdyazincahya-blog%2Fexample-vertical-scroll-jquery","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdyazincahya-blog%2Fexample-vertical-scroll-jquery/lists"}