diff --git a/web/src/assets/locales/en.json b/web/src/assets/locales/en.json
index 63a8c89f0e..a26e87caef 100644
--- a/web/src/assets/locales/en.json
+++ b/web/src/assets/locales/en.json
@@ -227,7 +227,9 @@
         "deploy": "Deploy",
         "restart_success": "Pipeline restarted",
         "log_download": "Download",
-        "log_delete": "Delete"
+        "log_delete": "Delete",
+        "log_auto_scroll": "Enable automatic scrolling",
+        "log_auto_scroll_off": "Disable automatic scrolling"
       },
       "protected": {
         "awaits": "This pipeline is awaiting approval from a maintainer!",
diff --git a/web/src/components/repo/pipeline/PipelineLog.vue b/web/src/components/repo/pipeline/PipelineLog.vue
index 2793a906e8..7769509316 100644
--- a/web/src/components/repo/pipeline/PipelineLog.vue
+++ b/web/src/components/repo/pipeline/PipelineLog.vue
@@ -44,6 +44,16 @@
             icon="trash"
             @click="deleteLogs"
           />
+          <IconButton
+            v-if="step?.finished === undefined"
+            :title="
+              autoScroll ? $t('repo.pipeline.actions.log_auto_scroll_off') : $t('repo.pipeline.actions.log_auto_scroll')
+            "
+            class="hover:bg-white/10!"
+            :icon="autoScroll ? 'auto-scroll' : 'auto-scroll-off'"
+            @click="autoScroll = !autoScroll"
+          />
+          <IconButton class="hover:bg-white/10! md:hidden!" icon="close" @click="$emit('update:step-id', null)" />
         </div>
       </div>
 
@@ -112,6 +122,7 @@
 <script lang="ts" setup>
 import '~/style/console.css';
 
+import { useStorage } from '@vueuse/core';
 import { AnsiUp } from 'ansi_up';
 import { decode } from 'js-base64';
 import { debounce } from 'lodash';
@@ -166,7 +177,7 @@ const hasLogs = computed(
     // we do not have logs for skipped steps
     repo?.value && pipeline.value && step.value && step.value.state !== 'skipped',
 );
-
+const autoScroll = useStorage('woodpecker:log-auto-scroll', true);
 const showActions = ref(false);
 const downloadInProgress = ref(false);
 const ansiUp = ref(new AnsiUp());
@@ -256,7 +267,7 @@ const flushLogs = debounce((scroll: boolean) => {
 
   if (route.hash.length > 0) {
     nextTick(() => document.getElementById(route.hash.substring(1))?.scrollIntoView());
-  } else if (scroll && isScrolledToBottom()) {
+  } else if (scroll && autoScroll.value && isScrolledToBottom()) {
     scrollDown();
   }
 }, 500);
@@ -380,7 +391,7 @@ watch(stepSlug, async () => {
 
 watch(step, async (newStep, oldStep) => {
   if (oldStep?.name === newStep?.name) {
-    if (oldStep?.finished !== newStep?.finished && isScrolledToBottom()) {
+    if (oldStep?.finished !== newStep?.finished && autoScroll.value && isScrolledToBottom()) {
       scrollDown();
     }