onclick Search - jump to search results section - javascript

I would like to change the functionality of WP Casa theme Paraiba. http://wpcasa.com/demo/paraiba/
Right now the search results are displayed under the page fold - my aim is to scroll down on them after the search button is clicked.
Would you advise me how to accomplish that?
Thanks.

Try this :
$(document).on('click','.listing-search-submit', function(event) {
event.preventDefault();
$('html, body').animate({
scrollTop: $("#main-wrap").offset().top
}, 2000);
});
NOTE : This answer depends on the link given by you.So if you have made changes to class or ID then above code won't run.

Related

jQuery scroll to section on another page

I have a website which uses jQuery to scroll between a few sections (in page1.html). Now, I added another page to the website (page2.html).
I would like the links in the header of page2.html to link back to the corresponding section in page1.html.
In page2.html I wrote:
<li>Home</li>
This links back to page1.html#splash. But on page1, the site does not scroll to the respective section.
My JavaScript is:
$(document).ready(function(){
$('a[href=\\#]').click(function(e){
e.preventDefault();
$('nav').removeClass('visible');
$('html,body').stop().animate({scrollTop: $('.'+$(this).data('scrollto')).offset().top-65 }, 700, 'easeInOutExpo', function(){});
});
What I already tried:
I attempted to add the following code, found elsewhere, to page1.html:
<script>
$(document).ready(function(){
// Add smooth scrolling to all links
$("a").on('click', function(event) {
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
var hash = this.hash;
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
}
});
});
</script>
But there is no scrolling to the right section and the console put out the following error: index.html:19 Uncaught ReferenceError: $ is not defined
Frankly, I am stuck at this point due to lack of expertise in this field.
How do I manage that the site actually scrolls to the right section when coming from another page?
Once you have left the page, the JavaScript from the previous page can't control it. So, you'll need to use jQuery to handle it on the new page when it loads. Place this code on page1.html, changing the comment to the scroll command:
$(document).ready(function() {
if (window.location.href.includes('#splash')) {
let animationTime = 100;
$('html, body').animate({
scrollTop: $('.splash').offset().top
}, animationTime);
}
});
Uncaught ReferenceError: $ is not defined
gives this type of error when your page doesn't get the JQuery

Scroll to anchor if URL contains a certain word

Apologies if this has already been asked, but I couldn't find a specific solution.
I am using a set uneditable plugin on my website which uses pages. I cannot edit the code for the plugin. The paged content is towards the bottom of the page that it is displayed on: see here
When the user clicks on the pages, it adds "page/2/" etc to the end of the current URL, but it shows the user the top of the page.
I have added an anchor just before the plugin, but how can I scroll the user to the anchor based on if the URL contains "page/2/" or "page/3/" etc.?
Simply: If the URL contains the word "page", then scroll to #anchor
Thanks!
Got it working, thanks #hangindev
<script type="text/javascript">
if(window.location.href.indexOf("page") > -1) {
(function($) {
$(document).ready(function() {
$('html, body').animate({
'scrollTop': $('#anchor').offset().top
}, 1000);
});
})(jQuery);
}
</script>
Maybe this helps
Bottom
<h1 id="bottom">This is the bottom! </h1>

Scroll to the element id that is supposed to be loaded via Ajax (Infinite Scroll)

So, I have two pages, notifications and topic. Topic page has comments, every comment has an unique id. When user presses on the comment link in the notifications page it takes him to the topic page that is scrolled to the exact comment user pressed on. The link after that looks something like topic/titleoftopic#comment_627. It worked pretty good, but now, when I have added infinite scroll and started showing only first few comments (rest of it is loaded on the scroll to bottom) it won't scroll to the comment and I receive an error in the console Uncaught TypeError: Cannot read property 'top' of undefined, obviously this is because the comment is not loaded yet. Is there any way to make it work? I have an idea - start scrolling to the bottom until it finds the exact comment, but not sure how to implement this. Here is my code on how do I make it scroll:
//Scroll to the comment from notifications
$(document).ready(function() {
$('html, body').hide();
if (window.location.hash) {
$('html, body').scrollTop(0).show();
$('html, body').animate({
scrollTop: $(window.location.hash).offset().top
}, 800);
} else {
$('html, body').show();
}
});
Thanks everyone for any advice or suggestion!
For dynamically added items you have to find that id from whole document.
$(document).ready(function () {
$('html, body').hide();
if (window.location.hash) {
$('html, body').scrollTop(0).show();
$('html, body').animate({
scrollTop: $(document).find(window.location.hash).offset().top
}, 800);
} else {
$('html, body').show();
}
});

Scrolling Site Issues With Main Nav

I've built a scrolling homepage for my site that allows users to click a link in the header to scroll down to different sections of the site. I also have external links to new pages that allows users to view different projects.
For whatever reason, it works great, but as soon as I get to one of the project pages, then try to click the home page, or the work links it doesn't work properly. Without creating a second header.php,
how can I make the nav work globally.
<script>
$(document).ready(function(){
$('a.logo, ul.nav a, #mmenu a, a.mobileLogo').bind('click',function(event){
var $anchor = $(this);
href_arr = $anchor.attr('href').split("#");
$('html, body').stop().animate({
scrollTop: $('#'+href_arr[1]).offset().top - 0
}, 500); // it was -70
event.preventDefault();
});
});
});
</script>
My links looks like this...
Link
Work
Any thoughts on how to fix the jQuery so it works on external pages?
It sounds like #home and #work don't exist on your product pages, correct? If that's the case then calling event.preventDefault() will actually prevent the browser from going back to your home page. Try checking if the element exists before preventing the default behavior. If the element doesn't exist, the browser will visit the link normally. This is one way of doing it.
$(document).ready(function(){
$('a.logo, ul.nav a, #mmenu a, a.mobileLogo').bind('click',function(event){
var hash = '#' + $(this).attr('href').split('#')[1];
// check if the element exists on your page
if ($(hash).length) {
// if so, scroll to it and prevent the default behavior
$('html, body').stop().animate({
scrollTop: $(hash).offset().top - 0
}, 500);
event.preventDefault();
}
});
});

How to make scrolling to target smooth

I have set up an comment button that is link to comment section of the page, it's like this
Comments
Demo on this page http://stramaxon.blogspot.com/2012/04/how-to-remove-shadows-from-pictures-in.html#disqus_thread
When you click it, you will be taken to the comments section, now i want the scrolling to be smooth, i know it is possible but can't find the key to achieve it. I am sure intelligent web designers in Stackoverflow will help me out.
I want it to be like this, check this page http://www.labnol.org/internet/bing-background-for-google-homepage/21303/
Scroll down and you will see a back to top button, it's so smooth i love it and want something like that.
$("#topBtn").click(scrollToTop);
function scrollToTop()
{
$('html, body').animate({scrollTop:0}, 1000);
}
should work
EDIT: that's for a non href, when you wanna use it on a href you should to it like this
function scrollToTop()
{
$('html, body').animate({scrollTop:0}, 1000);
return false;
}

Categories

Resources