Content within the divs can now be scrolled vertically. Refresh the page to return to

I'm using the simplest HTML 'overflow: scroll' type mark-up for creating a scroll bar within multiple div containers to display text and image content within the scroll. I have it setup within tabbed content areas, that are pulled together calling divs within the tab links. I'm trying to figure how, if possible, that when a user browses to a different tab and then back - to allow that scroll bar to reload to the top, ready to scroll downward again.

Pretty much, the mark-up;

        <li class="newtab">

<!--JS Rollover Button for Tab-->

<a href=#tab13  onMouseOver= "if (document.images) document.tab_recordedattack_off1.src= 'img/Btns/tab_recordedattack_on1.png';" onMouseOut= "if (document.images) document.tab_recordedattack_off1.src= 'img/Btns/tab_recordedattack_off1.png';"><img src="img/Btns/tab_recordedattack_off1.png" name=tab_recordedattack_off1 border=0></a>

<!--End JS Rollover Button for Tab-->

        </li>

    </ul>

    <div class="tab_container">

        <div id="tab13" class="tab_content">

          <div class="tabright">

<div style="border:0px solid black;width:500px;height:400px;overflow:scroll;overflow-y:scroll;overflow-x:hidden;">

I've been considering the option of setting a straightforward HTML anchor point at the beginning of scroll regions and somehow referencing it in the tab links - yet, I am unsure of the implementation process.

Do you have any advice? How can I link the tabbed links to the relevant content and anchor point?

htmlcss

Answer №1

To reset the scroll using jQuery, you can utilize the following code snippet: http://jsfiddle.net/Cqhch/

$("button").on("click", function(){
        $("div:first").scrollTop(0);
    });

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

Reposition a Single Item on the Top Menu to the Right

I'm new to HTML and CSS and I need help aligning the "Login" item to the right. I'm trying to create a horizontal menu bar, but not sure if I'm approaching it correctly. Something similar to this: How I want it to be Here is the code I have ...

htmlcssalignmenttext-align

What is preventing my accordion from closing completely?

I'm currently working on creating FAQ questions in an accordion format. However, I've encountered an issue where adding padding around the answer section prevents the accordion from closing completely. Removing the padding solves the problem, but ...

javascripthtmlcss

What steps can be taken to identify the referrer of external links when the target attribute is set to "_blank"?

Can't seem to capture the Referrer with PHP: $_SERVER['HTTP_REFERER']; Whenever visitors land on mywebsite.com from external-web-site.com via a link with target="_blank", for example: ... <a href="http://mywebsite.com" target ...

phpjavascripthtmlscripting

Sending user input from a Laravel modal form to a controller as a parameter

I have a button that triggers a modal form where the user can update their group name. I'm trying to pass the ID into the form using {!! Form::open(['action' => [ 'ContactsController@update', id]]) !!}. I attempted to do this si ...

phphtmljquerylaravelforms

Why do I have trouble choosing my radio buttons?

How come my radio buttons aren't responding when clicked on? I have to press next to the button to get it to select. What could be causing this issue? <!DOCTYPE html> <html> ... </html> ...

html

Would parallax stars be overwhelming for a webpage?

I'm a newcomer to the world of web development and I have an idea to make stars move across my website. However, I'm concerned about whether this might be too much for a simple website to handle. Is there a way to optimize the code? const canvas ...

javascripthtml

Capture cached images stored in the browser memory without relying on the source attribute of the <img> tag

Imagine you're managing a website, samplewebsite.com and you find that the images on it have been resized to very low quality. When you click on an image, you are directed to a 'view_image' page, for example samplewebsite.com/view?image=u ...

javascriptjavahtmljsoupbrowser-cache

Troubleshoot: Inline Styling Problem with Bootstrap 4 Popover

Is there a way to dynamically change the color of the Bootstrap 4 popover title using inline HTML style attributes? It seems that the plugin is removing them without any logical reason. Below is an example demonstrating this issue: $('#test'). ...

javascripthtmlcssbootstrap-4

What is the best way to add custom styles to Material UI tabs in a React application?

I need help styling my material UI tabs within a react component. I am having trouble getting the styles applied correctly, specifically setting the background color and box shadow of the entire bar, as well as defining the indicator background color and u ...

cssreactjsmaterial-uinavigation

Hover effect affecting adjacent divs on left and right sides

My navigation bar, known as .navbar, consists of 7 direct child elements called navbar-item. Currently, I have implemented a hover effect where the width and height of a navbar item increase by 20px upon hovering. However, my goal is to enhance this inter ...

htmlcss

The ng-repeat directive in my Angular app's div element is being displayed as a comment

After spending several days searching, I have yet to find a solution for my issue. It seems to be specific to the code I'm working with in Angular 1.6. I apologize for the format of my post, as this is my first time seeking help on stack overflow ...

htmlangularjsangularjs-ng-repeat

Is it possible to create and view HTML files in Objective C through user interaction?

I am currently working on developing an iOS app that enables users to create an unlimited number of HTML documents and save them within the app's documents folder. It's somewhat of a combination question, but how can I showcase a file that is sto ...

htmlobjective-cios

I am facing an issue where my Javascript hide and show function is not working properly when clicked. Despite not giving

I am currently working on a Javascript onClick function to toggle the visibility of content in a lengthy table. I initially set part of the table's class to display: "none" and added a button to show the hidden content when clicked. However, nothing i ...

javascripthtmlcss

Tips for dynamically adjusting an iframe's content size as the browser window is resized

Currently, I am in the process of building a website that will showcase a location on a map (not Google Maps). To achieve this, I have utilized an iframe to contain the map and my goal is for the map to adjust its width based on the width of the browser wi ...

javascriptjqueryhtmlcssiframe

combine multiple select options values in a single function using jQuery

My HTML code includes two select options for users to choose the origin and destination cities. I need to calculate the cost of travel between these cities. How can I compare the selected options using jQuery? </head> <body> <div> ...

javascriptjqueryhtml

Mastering Bootstrap: Achieving flawless column stacking in succession

I am currently integrating bootstrap into my existing HTML code, but I only require it in two specific sections to avoid rewriting the entire code. Everything looks fine on my 1080p screen as intended. However, when I resize the screen slightly The titl ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Ensuring an image fits perfectly within a div that spans 100% width using CSS

I'm brand new to CSS and could use some guidance Here's the issue: I have a 1600 pixel wide image and a div that is 100% wide. Is there a method to adjust the image so it fits within the div, eliminating any horizontal scroll bars and cutting o ...

htmlcssimagewidth

Positioning a button at the center-right

I'm currently in the process of creating a coming soon website, which you can find hosted here. However, I am having some trouble aligning the button correctly. My goal is to have it positioned to the right of the text field. How can I achieve this? ...

htmlcss

Implement the MathJax package for automatic word wrapping of mathematical

I have implemented additional processing for MathJax using the following code snippet: <script type="text/x-mathjax-config"> MathJax.Hub.Config({ tex2jax: { inlineMath: [["$","$"],["\\(","\\)"]] }, "HTML-CSS": { ...

htmlioscssmathjax

Is it possible to trigger a click event exclusively on a parent element?

One feature I'm trying to implement in my app is the ability to click on an item, such as changing the background color or text, and have a modal pop up with a color picker to customize the color of that specific item. However, I've run into an i ...

javascriptcssreactjschakra-ui