Is it possible to implement smooth scrolling in HTML without using anchor animation?

Is it feasible to implement a more seamless scrolling experience for a website? I'm referring to the smooth scrolling effect seen in MS Word 2013, but I haven't come across any other instances of this. I've heard that AJAX can make such things achievable, so do you think it could help with this? I'm not looking for a smooth scroll to anchor specifically, but rather a smooth scrolling effect when freely scrolling down the page using the mouse wheel or scrollbar. However, what I want is similar to the smooth scroll to anchor feature.

javascriptjqueryhtmlcssajax

Answer №2

The speed at which a web page scrolls is determined by the browser and device settings, not by CSS or Javascript code. Attempting to manipulate scroll speed may compromise the appearance of the scroll bar.

If you are able to capture scroll events, you could dynamically adjust your content to ensure that the desired portion is visible.

Flash may provide more flexibility in achieving this goal.

[EDIT]
PLEASE NOTE: THIS IS WITHOUT ANCHOR TAG
I attempted to replicate your query without using any anchor tag. While it may not directly answer your question, it's worth trying out:-

HTML:-

<div id="div1">asdf1</div>
<div id="div2">asdf2</div>
<div id="div3">asdf3</div>
<div id="div4">asdf4</div>
<div id="div5">asdf5</div>
<div id="div6">asdf6</div>
<div id="div7">asdf7</div>
<div id="div8">asdf8</div>
<div id="div9">asdf9</div>
<div id="div10">asdf10</div>

CSS:-

div {
height: 50px;
}

Lastly, add this to your jQuery script:-

 $(document).ready(function () {
   $("html, body").animate({
    scrollTop: $("#div5").offset().top
   }, 5000);
  });

Answer №3

Implement smooth scrolling using JQuery

Include JQuery Library

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script>
    $(function() {
      $('a[href*=#]:not([href=#])').click(function() {
        if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {

          var target = $(this.hash);
          target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
          if (target.length) {
            $('html,body').animate({
              scrollTop: target.offset().top
            }, 1000);
            return false;
          }
        }
      });
    });
</script>

The provided code snippet will enable smooth scrolling functionality on your website.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Integrating additional youngsters into the HTML DOM using Angular.js

I am working with a block of HTML that looks like this: <div id="parent"> <div id="child_1"></div> <div id="child_2"></div> <div id="child_3"></div> <div id="child_4"></div> </div> ...

javascriptjqueryhtmlangularjsnode.js

Ways to halt a CSS animation when it reaches the screen boundary

I put together this demo: By clicking, a red box falls down. The issue arises when trying to determine the screen size using only CSS. In my demo, I set the box to fall for 1000px regardless of the actual screen height. Here is the keyframe code snippet ...

javascriptjquerycssanimation

I've been attempting to relocate a CSS element at my command using a button, but my previous attempts using offset and onclick were unsuccessful

I am trying to dynamically move CSS items based on user input or button clicks. Specifically, I want to increment the position of elements by a specified number of pixels or a percentage of pixels. Currently, I am able to set the starting positions (top a ...

javascriptjqueryhtmlcssajax

Using Jinja2/Python, is it possible to alter the parent's style depending on the child's value?

Initially, I found that the :has() combinator accomplishes my desired outcome. In my HTML, I have a table structured like this: <table class="table"> {% for dict_item in data | sort(attribute='name') %} <tr class=" ...

pythonhtmlcssflaskjinja2

PHP incorporate diverse files from various subfolders located within the main directory

My question is similar to PHP include file strategy needed. I have the following folder structure: /root/pages.php /root/articles/pages.php /root/includes/include_files.php /root/img/images.jpg All pages in the "/root" and "/root/art ...

phphtmlcssimageinclude

What is the best way to retrieve a specific property or attribute of a specific div element after obtaining it from e.target.parentNode?

e.target.parentNode will return this element. <div class="quantity"> <span class="glyphicon glyphicon-minus-sign"></span> <span class="product_Count"> 4 </span> <spa ...

javascript

Efficient creation of a user-friendly interface application designed to retrieve data from a nearby server

The Challenge I am faced with the task of creating a simple GUI application that can either be run on a local Ubuntu 14 server or locally while still being able to access data from the server for multiple users to make changes to a basic array data file. ...

pythonhtmluser-interfaceserverwysiwyg

What could be causing the file resumeData.json to not load correctly on GitHub pages after deployment?

After trying out this specific tutorial for deploying my personal website template found on GitHub to GitHub pages, I encountered an issue with the loading of information from public/resumeData.json. My personal page can be accessed at: The master branch ...

jqueryreactjsnpmgithub-pagesnpm-start

Exploring collapsible data tables in Angular with Bootstrap styling

I am attempting to transform my static bootstrap data table, which displays the total count of fruits harvested in various months in an incremental manner, into a dynamic one using the JSON provided below: JSON { "fruit": [ { "fruitName": "Al ...

javascriptjqueryangularjsjsontwitter-bootstrap

How can we efficiently validate specific fields within arrays and objects in express-validator by utilizing the body() method?

I have organized my field names in an array as follows: const baseFields = [ 'employeeNumber', 'firstName', 'lastName', 'trEmail', 'position' ]; These are the only input fields I need to focus on for valid ...

javascriptnode.jsformsexpressexpress-validator

The element selector for the <code> tag is not recognized in SCSS

Update on 2020/02/23: I have made some additions to my project. Apologies for the lack of information provided earlier. The project I am working on is a modified version of the [Gatsby + Netlify CMS Starter][1]. In the process, I swapped out all.sass wit ...

csssass

The top value in CSS animation fails to change properly

Can anyone help me figure out why the animation doesn't work when I try to change the vertical position of a form using JQuery? I want the input field to smoothly move to its new position so that users can see it happening. Here is the JsFiddle link: ...

htmlcssanimationanimate.css

Are you looking for a demonstration of "Creative Loading Effects" that triggers when the page is loaded?

I came across this demo for a preloader on my website called Creative Loading Effects, specifically the "3D Bar Bottom" effect, which I find very exciting. However, I noticed that it only loads when we press the button, and not automatically when the page ...

javascripthtmlcssonloadpreloader

Embedding PHP code within inline styles

Is it possible to incorporate a variable inside my progress bar? I want the progress to change based on the status of each project ($projek), but inserting the variable directly into the style attribute doesn't seem to be working. Here's the code ...

phphtmllaravel

Unexpected PHP Error Thrown

Every time I run this code, I encounter the following error message: Notice: Trying to get property of non-object in C:\wamp\www\HoneysProject\function.php on line 1178 The error pertains to this specific line of code: $number_ph ...

phphtml

Preserving chosen options in a dropdown menu using PHP and HTML

I'm facing an issue with my code where the selected values in a dropdown menu revert back to default every time the page refreshes. How can I ensure that the selected values remain unchanged? Unfortunately, I am unable to utilize AJAX as per the user ...

phphtml

How to retrieve data from an undefined table using Sequelize that is created through association

I've encountered a new challenge while working on my latest project; Imagine the tables User and Project in Sequelize have been defined. There's also a third table in the database called ProjectsUsers, and I need to retrieve data from there. T ...

javascriptnode.jsexpresssequelize.js

REGEX: All characters that appear between two specified words

Is it possible to use Regex to select all characters within the designated words "Word1 :" and "Word2 :"? I am looking to extract any character located between these two specific phrases. Word1 : Lorem ipsum dolor sit amet consectetur adipiscing elit ...

javascriptregex

Captivating Images accompanied by Descriptive Captions

I was wondering if there is a straightforward method using only CSS and HTML to address this particular issue. I am in the process of creating a marquee that displays images within a fixed-width div. The number of images exceeds the capacity of the div, ...

htmlcss

I'm attempting to store the information from fs into a variable, but I'm consistently receiving undefined as the output

I'm currently attempting to save the data that is read by fs into a variable. However, the output I am receiving is undefined. const fs = require("fs"); var storage; fs.readFile("analogData.txt", "utf8", (err, data) =&g ...

javascriptnode.jsnpmfilesystemsfs