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-->
<img src="img/Btns/tab_recordedattack_off1.png" name=tab_recordedattack_off1 border=0>
<!--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 thinking about trying to set a simple html anchor point at the top of scroll areas and somehow call to it within the tab links - but can't figure out how to do that.
Any suggestions? - How can I point the tabbed links to the content and the anchor point?
You can use jQuery to reset the scroll: http://jsfiddle.net/Cqhch/
$("button").click(function(){
$("div:first").scrollTop(0);
});
Related
is there a trick to do this(cause i want my div to automatically scroll without javascript)
If you want do this without javascript you can make your div tag and hidden that. Then you can show your content when user scroll the page. Also you can use AOS library. Please see this link https://michalsnik.github.io/aos/
You can use a URL fragment:
example.com/example#divtoscrollto
<div> <div>{scrollable content}</div> <div id="divtoscrollto"></div> </div
Place an element at the bottom of the scroll content then if you change the url to that fragment for it's id it will jump to its location.
I'm using an css only responsive menu on my page. It's basicly uses checkbox with label to open and close the menu.
But i've notice when the page content scroll and I click, it's back to the top. Is there any css only solution for it?!
I'm using this tutorial as reference https://www.sitepoint.com/pure-css-off-screen-navigation-menu/
This is caused because of the a tag.
when clicking <a href="#"><a> the browser reload the page and that is why it jumps to the top.
Change <a> to <span> and your problem should be solved.
of course, you might need to change some css to get the proper styling:
<ul class="navigation">
<!-- Change this to <span> instead of <a> -->
<li class="nav-item"><span>Home</span></li>
...
</ul>
I've got an input that fires a jQuery toggle to switch between content in two different divs... two separate menus in this case.
Because one menu is much longer than the other, I placed that input within an a-tag that scrolls up to the top of container so if the user is at the bottom of the long menu and then switches to the short menu, they're not stuck way at the bottom of the container. One menu is quite long, especially on mobile viewports.
Everything works exactly as intended, but it's throwing an HTML5 validation error because an a-tag can't contain an input.
Any suggestions on keeping the functionality but eliminating the error?
The HTML:
<section id="menu-bin">
<div id="menu-1">
<!-- A Bunch of Menu Content -->
</div>
<div id="menu-1">
<!-- A Bunch of Menu Content -->
</div>
</section>
<div class="button-switches">
<a class="scrolly" href="#menu-bin">
<!-- Forces scroll to top of menu (important for mobile) -->
<input id="menu-switch1" type="button" value="Switch Menus" /></a>
</div>
I have two spry menus on one page. One is main site and one is that individual page's menu that shows and hides div accordingly.
The "artistMenu" div doesn't work and it doesn't even have the hover effects, although it's set up exactly like the site menu apart from the different UL id's
<div id="artistMenu">
<ul id="MenuBar2" class="MenuBarHorizontal">
<li>Social</li>
<li>Music</li>
</ul>
<!--Artist menu end--></div>
CSS:
#artistMenu{
background-color: #000;
}
The main site menu is set up virtually the same way except it's in the header div with logo and has no background.
If I comment out the <div id="artistMenu"> the link's work however, I lose my background color and the contents below the menu, for whatever reason because un-styled as the pop out of the <div id="gridContainer"> and and spread the width of the page.
I've worked on this for 5 days off and on and can't figure it out nor find info online.
http://joshhornby.co.uk/skinnybeer/index.html
As you can see when you click on 'The Booze' in scrolls down to the first item in the container not the area where the div is.
The nav html is
<li>The Booze</li>
and linking to a div id called booze.
<div id="booze">
It seems to be linking to the image or the container and I am not sure how to make it scroll to the header not the image.
It is linking to #booze, you just have a position: fixed element covering it up.