Scrolling to ID or Anchor using jQuery: Automatically scrolls to the top if already at the designated section

I've been on a quest to uncover the cause and solution for this issue. Lately, I've been utilizing 

$("#content").animate({scrollTop:$(#elementId).offset().top-183}, 600);

to achieve smooth scrolling to an ID within a <div>. The number 183 serves as an offset to position my element at the top. While it does work, clicking it again when already at the target scrolls me back up to the beginning. If I click it while positioned below the element, it doesn't function correctly. It only behaves properly when I am situated above the element.

Could it be that "scrolltop" is not always the appropriate jQuery function for this task? Or should I assess whether the element is above or below me and employ a different command accordingly? It appears there isn't much documentation on this behavior, with only a few individuals mentioning it. Perhaps there's a simple solution that has eluded me thus far? I aim to create a JSfiddle to demonstrate this behavior, but I'm hopeful that someone here may have encountered this before and could offer some insight on how to resolve it?

javascriptjqueryhtmlcssscroll

Answer №1

It appears that when you scroll, the position of the element within #content changes. This explains why the top position of the target element is zero when it's already visible. To accurately calculate the value for scrollTop, you need to add the current scrollTop value to the offset.

$('#scroll').click(function() {
  $("#content").animate({scrollTop: $("#content").scrollTop() + $('#target').offset().top - 10}, 600);
});
#content {
  max-height: 100px;
  overflow: scroll;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="content">
  
  <pre>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget elementum lorem, sed commodo erat. 
  Maecenas a egestas lectus. Sed hendrerit ut quam id rhoncus. In iaculis dapibus nulla, ut iaculis metus 
  varius at. Nullam eleifend felis lacus, eget viverra elit pellentesque volutpat. Vestibulum ante ipsum 
  primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam ultrices, arcu pretium hendrerit
  laoreet, ante nunc mollis orci, in egestas eros risus eget libero. Pellentesque habitant morbi tristique 
  senectus et netus et malesuada fames ac turpis egestas. Praesent dictum elit tortor, a tincidunt dolor 
  elementum at. Integer ullamcorper mauris id enim facilisis finibus. Etiam elementum lacus urna, ut 
  consectetur lorem tincidunt at. Suspendisse ac finibus sapien.
  </pre>
  
  <div id="target">
    Hello, World!
  </div>
  
  <pre>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget elementum lorem, sed commodo erat. 
  Maecenas a egestas lectus. Sed hendrerit ut quam id rhoncus. In iaculis dapibus nulla, ut iaculis metus 
  varius at. Nullam eleifend felis lacus, eget viverra elit pellentesque volutpat. Vestibulum ante ipsum 
  primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam ultrices, arcu pretium hendrerit
  laoreet, ante nunc mollis orci, in egestas eros risus eget libero. Pellentesque habitant morbi tristique 
  senectus et netus et malesuada fames ac turpis egestas. Praesent dictum elit tortor, a tincidunt dolor 
  elementum at. Integer ullamcorper mauris id enim facilisis finibus. Etiam elementum lacus urna, ut 
  consectetur lorem tincidunt at. Suspendisse ac finibus sapien.
  </pre>

</div>
<button id="scroll">Scroll to #target</button>

Answer №2

If you're looking to implement a scroll to top/back to top feature on your website, I have the perfect solution using a simple JavaScript snippet.

HTML

<body id="top">

<a href="#top" onclick="scrollToTop();return false">Back to Top ↑</a>


JavaScript

<script>
var timeOut;
function scrollToTop() {
    if (document.body.scrollTop != 0 || document.documentElement.scrollTop != 0) {
        window.scrollBy(0, -50);
        timeOut = setTimeout('scrollToTop()', 10);
    } else {
        clearTimeout(timeOut);
    }
}
</script>

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

the reason behind the peculiar behavior of angularjs ng-include

I am attempting to utilize an ng-template to iterate through my args in order to create an indented menu content. Unfortunately, I have encountered issues with ng-include not working as expected. I have tried adding a quote but it still does not work. For ...

javascriptangularjsangularjs-ng-includeangularjs-ng-template

What could be preventing certain child elements from rendering in the browser when using scss/ compiled css?

I currently work with the Visual Studio Code editor and execute "npm run sass" in the bash terminal. Whenever I modify the scss file, the terminal displays the following message: => changed: C:\Users\kenne\modern_portfolio\scss&bso ...

htmlcssnpmsass

Array of JSON data passed in the request body

Recently, I have been attempting to pass JSON data to my req.body. The data structure is as follows: answers = ["A","B"]; //An array to be included in the JSON Object var Student_Answers = { //JSON object definition Answers: answers, matricNumber: ...

javascriptnode.jsjsonexpress

"Chrome is throwing an unanticipated error for bigpipe.js with an uncaught syntax error related to

I have integrated the bigpipe.js method into my website to display a newsfeed. It functions properly on all browsers except for Google Chrome, where it shows an 'uncaught syntaxerror unexpected token =' error. I need assistance in resolving this ...

javascriptphpjquerygoogle-chrome

Is it possible to have a PHP variable embedded within an HTML link tag?

<?php $message = ' <a href="' . $link . '">here</a> '; ?> My goal is to include a clickable link in the $message variable for use in the mail() function. However, despite setting $link with the desired link string, it ...

phphtml

Bootstrap - Struggling to achieve responsiveness on the page

I've recently designed a website with a mega menu feature. However, as I try to resize the page, the layout doesn't adjust well, and some elements appear to be overflowing beyond the screen. Unfortunately, I can't share the entire code. Cou ...

htmljquerycssbootstrap-4

Solving the Issue of Assigning a Random Background Color to a Dynamically Created Button from a Selection of Colors

Trying to create my own personal website through Kirby CMS has been both challenging and rewarding. One of the features I'm working on is a navigation menu that dynamically adds buttons for new pages added to the site. What I really want is for each b ...

javascriptphphtmlcsskirby

How can I transfer the total and counter values to a different PHP page and store them in a text box before saving them to the database?

I need to transfer the total and counter values to another PHP page using a text box and then save them to a database. { var price =10; //price $(document).ready(function() { var $cart = $('#selected-seats'), //Sitting Are ...

javascriptphp

Retrieve information from a MySQL database and integrate it into a different application

This php script is used to generate a table with a "book" button next to each row. The goal is to extract the values of "phase" and "site" from the specific row where the "book" button is clicked, and transfer them to another form (in "restricted.php") fo ...

javascriptphphtmlmysqlforms

What are the pros and cons of using a piped connection for Puppeteer instead of a websocket?

When it comes to connecting Puppeteer to the browser, you have two options: using a websocket (default) or a pipe. puppeteer.launch({ pipe: true }); What distinguishes these approaches? What are the benefits and drawbacks of each method? How do I know wh ...

javascriptnode.jspuppeteerwebautomation

Having issues with the onclick _dopostback function in MVC? It seems like the post

When attempting to execute a postback in ASP.NET MVC after confirming with JavaScript, the following button is used: <input type="submit" id ="RemoveStatus" value="Remove Status" name="button" onclick="return CheckRemove();"/> The JavaScript code f ...

javascriptasp.netasp.net-mvcpostbackdopostback

Minimizing repetitive code using jQuery functions

Discovered an effective jQuery popup function right here: JAVASCRIPT $(function() { $("#word1234").live('click', function(event) { $(this).addClass("selected").parent().append(' <div class="messagepop pop">"Lo ...

jquery

Is the in-app browser of WeChat able to support self-signed HTTPS URLs?

My local WAMP server hosts a web application with self-signed SSL enabled, resulting in the following app URL: https://myipaddress:port/demoapp/index.html However, when I send this URL via WeChat chat and click on it, only a blank page is displayed. Stra ...

htmlweb-applicationsgoogle-chrome-extensiongoogle-chrome-devtoolswechat

Redirect link depending on JSON callback information

I experimented with utilizing JavaScript to automatically redirect website visitors based on their country. The code snippet below demonstrates how the visitor's IP is checked to determine their country, such as CN for China, and then redirects them ...

javascriptjsongeoip

Tips for turning on a gaming controller before using it

Current Situation In my ionic side menu app, I have a main controller called 'main view'. Each tab in the app has its own controller, which is a child of the main controller. The issue I'm facing is that when I start the app, the first cont ...

javascriptangularjs

What causes the cleanup function in React hooks to be triggered upon reopening a previously closed tab?

There seems to be an issue with closing a tab and then undoing that action. This causes all the cleanup functions in the component to execute, resulting in the abortion of new fetches needed to load the component. This behavior is observed only on Safari ...

javascriptreactjserror-handlingreact-hookssafari

Is there a way to automatically fill a form from a database using the HTML column of a gridview?

I have developed an asp.net webform that contains checkboxes and textboxes. Upon submission, the data is stored in a SQL Server database. In addition to this form, I have created another webform with a gridview displaying the submitted data. My goal is t ...

c#jqueryhtmlasp.netgridview

Setting the background color in the navbar of a Laravel application

I'm having trouble changing the color of my navbar to blue in certain parts. I've tried using background: lightblue;, but for some reason, two sections remain white. How can I make them completely blue? (see screenshot below) Any help would be ap ...

csslaravelcolorsbackground-color

Creating a loading spinner in a Vue component while using the POST method

After successfully creating a loader for fetching data using the GET method, I encountered challenges when attempting to do the same with POST method. Is there a reliable way to implement a loader during the POST data process? For GET method, I set the lo ...

javascripthtmlcssvue.jsvuejs2

Husky 5: The Ultimate Gitignore Manager

Last week, a new version of Husky was released, known as Husky 5. I came across an interesting article discussing the features and updates in this release that can be found here. Upon migrating to Husky 5 (), I discovered a new directory named .husky with ...

javascriptnode.jsgitgitignorehusky