Internal Link Force scroll to top of page - javascript

I have some internal link which shows different content.
Everytime I click the internal links the browser scrolls to a position.
What I need to do is to force it to scroll to the top.
For example:
Click Here
It will show a certain div which is fine but I also need it to scroll to the top.
Is this possible?

Not sure of the exact methods right now, but something like this should work:
$('a').on('click', function(e) {
e.preventDefault();
// do your js stuff
$(window).scrollTop(0);
});

Do your links have JS code associated to the click event? Maybe you're stoping it's propagation and that is why they don't scroll your page.
If your link has an href value of "#" and you don't stop the propagation of the event (either by returning FALSE from your handler method or by using the stopPropagation method), then you should be set...

Sorry, the link doesn't work (if it was meant to be a link).
A little clarification--Are you trying to get the window to scroll the div to the top of the view, or have the window remain scrolled to the top of the viewport?
A link or code sample would be helpful...

If you're just trying to link to the top of the page,
Back to Top
should do the trick.

Related

How to prevent a react webpage from scrolling up when a component gets focus?

When I scroll completlely to the bottom of my page and click anywhere inside my modal, the page will scroll up a little. When I click on a link, it will sometime scroll up inseat of going to the link's address.
How can I prevent this? Thank you
You can use Window.scroll() to get and set your scroll position. If you post the code, I can help you better.
https://developer.mozilla.org/en-US/docs/Web/API/Window/scroll

Mobile Menu button takes top of the page

I have a wordpress site and i used a template to do it. So when i'm on mobile it has a mobile menu i managed to make it fixed to stay at the top when i scroll down, but the problem is. When i'm on a certain place at the site and i wanna open the menu with the "three line" icon it's opening the menu but takes me to the top of the page as well. And when i wanna close the menu with the X button it takes me to the top of the page as well, so basically the menu is unusable. I know it's a Jquery problem, but i can't find which file contain the codes for it and even how to fix it.
My website is: www.autoberles-szombathely.hu
So i wanna make the open menu button and close menu button to only open and close the menu and don't take me to the top of the page.
you can use:
$(selector).click(function(event) {
event.preventDefault();
//other stuff you might want to do on event
});
For the record you should not remove the href entirely, it should always exist to prevent unexpected behavior. If you don't want the href to be be acted on then just use that preventDefault() method, easy and keeps everything running smoothly.
Your menu has the following structure in a mobile viewport:
<i class="fa fa-bars"></i>
The # will cause the page to jump to the top, see here for a detailed answer why.
You have two possibilies to prevent this behavoir:
Add an event handler to this link and use event.preventDefault()
For jQuery
$('.menu-toggle').on('click', function(event){
event.preventDefault();
});
VanillaJs
document.getElementsByClassname('menu-toggle').addEventListener('click', function(event){
event.preventDefault()
});
Remove the attribute href completly (See here). When using this solution you have to use a css-reset or add e.g. cursor:pointer to these links again, because the standard browser css is not applied anymore.

Don't propagate mouse wheel scrolling to IFRAME and its content

On my page I have iframe that contains some divs with scrollbars:
http://jsfiddle.net/gdx6L940/
The iframe's content is from another domain, so I do not have access to its content via DOM.
How can I block mouse-wheel scrolling of the iframe and its content? What I want to achieve is that mouse-wheel scroll will always scroll the parent page, even if the cursor is over the iframe.
EDIT
I made a little bit more real-world example:
http://jsfiddle.net/gdx6L940/2/
I want to prevent the inner iframe's divs (facebok feed) from scrolling with mouse wheel.
EDIT
To make sure: I do not want to disable scrollbars on IFRAME element nor block all events completely. I would like to block only mouse-scrolls, but preserving the ability to click
I believe that you can simply set another div element over the existing one and then put the transparency of that at 100%. that may not be the correct way of achieving your goal but it should work. I'll test it and make edits if necessary
I think I got to do partially what you want
use the code to prevent the browser from scrolling inside the div (that is inside you iframe)
window.addWheelListener(div_el, function(e) {
console.log(e.deltaY);
e.preventDefault();
})
the working example and addWheelListener code is in my jsfiddle here
You can catch mousewheel event
iframe.contentWindow.document.onmousewheel=function(event){
event.preventDefault();
};
Just did some more research and it would appear that what you are trying to do is just not possible to do the way you want to do it.
also possible duplicate of
HTML iframe - disable scroll

page gets scrolled to top when absolute positioned drop down is opened

I have notification drop down just like that of facebook. when clicked on link, this drop down is shown, which is positioned as absolute. problem is, when the drop down is opened, the page is getting scrolled to top. Unfortunately I cant paste code as its huge. can you guess what could be the problem.
Ok here is what I have. http://jsfiddle.net/testtracker/uuQf3/1/
first scroll down then click on black link, and see that, it scrolls up first then shows notification drop down.
As above said, anchor tag with # href attribute will take you to the top of page, the solution to this is
catch the onclick event and do this
$('a').click(function(e){
e.preventDefault();
//OR
return false;
});
this will restrict its default behavior.
or you can directly write it in your anchor element like this
link
Problem here is that your link is trying to find an anchor tag called #. This doesnt exist, so it scrolls to the top of the page. What you need is to tell the event handler to not do the default action of loading the href="#".
The solution is to add e.preventDefault() to your event handler.
See demo here:
http://jsfiddle.net/ksokhan/uuQf3/2/

Stop page from scroll when changing page contents using Jquery

I am toggling a div using jquery. when this div appears on page my browser scroll bar goes to top, even i am on last of my page. can you help me to stop this scroll where it is even more and more divs appears on page using jquery
i shall be thank full
I assume the link which is being clicked that controls the div toggle is set as href="#". If this is the case, add preventDefault() to the jQuery click event handler to stop the link behaviour from making the page scroll to the top.
$("#myLink").click(function(e) {
e.preventDefault();
// toggle your div
});
you need to place all the divs that scroll inside another div that has a fixed height.

Categories